@fieldia/map 0.17.0 → 0.19.0

package/src/lib/styles.d.mts

@@ -14,14 +14,25 @@ export declare function installLeafletStyles(doc: Document, css: string): void;
  * tone, bubbles of pins that crowd, the card a pin opens, "Search this area".
  * Its own stylesheet, so a form with only a place or an area never carries it.
  */
-export declare const LIST_MAP_CSS = "\n.fd-map-list { min-width: 0; }\n.fd-map-mark { overflow: visible; }\n.fd-map-mark:focus { outline: none; }\n/* Each mark is as large as its face, stood on its point by its foot, its middle, or the tip of a label's tail. */\n.fd-map-mark.fd-map-foot { translate: -50% -100%; }\n.fd-map-mark.fd-map-middle { translate: -50% -50%; }\n.fd-map-mark.fd-map-tail { translate: -50% calc(-100% - 6px); }\n.fd-map-face {\n  --fd-map-tone: var(--fd-accent); --fd-map-on: var(--fd-accent-text);\n  position: relative; box-sizing: border-box; cursor: pointer; transition: scale 0.12s;\n}\n.fd-map-face[data-tone] { --fd-map-on: var(--fd-surface); }\n.fd-map-face[data-tone=\"info\"] { --fd-map-tone: var(--fd-info); }\n.fd-map-face[data-tone=\"success\"] { --fd-map-tone: var(--fd-success); }\n.fd-map-face[data-tone=\"warning\"] { --fd-map-tone: var(--fd-warning); }\n.fd-map-face[data-tone=\"danger\"] { --fd-map-tone: var(--fd-error); }\n.fd-map-face[data-tone=\"muted\"] { --fd-map-tone: var(--fd-muted); }\n.fd-map-face[data-stands=\"foot\"] { transform-origin: 50% 100%; }\n.fd-map-face[data-stands=\"middle\"] { transform-origin: 50% 50%; }\n.fd-map-face[data-hot], .fd-map-mark:hover .fd-map-face, .fd-map-bubble[data-hot], .fd-map-mark:hover .fd-map-bubble { scale: 1.12; }\n.fd-map-mark:focus-visible .fd-map-face, .fd-map-mark:focus-visible .fd-map-bubble { outline: 2px solid var(--fd-focus); outline-offset: 3px; }\n.fd-map-face-icon { display: block; }\n.fd-map-face-icon svg { display: block; width: 100%; height: 100%; }\n.fd-map-face[data-look=\"label\"] {\n  padding: 4px 9px; border-radius: 999px; font-weight: 700; font-size: 13px; line-height: 1.25; font-variant-numeric: tabular-nums;\n  background: var(--fd-surface); color: var(--fd-text); border: 1.5px solid color-mix(in srgb, var(--fd-text) 20%, transparent); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);\n}\n.fd-map-face[data-look=\"label\"][data-tone] { color: var(--fd-map-tone); border-color: var(--fd-map-tone); }\n.fd-map-face[data-look=\"label\"]::after {\n  content: \"\"; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; margin-left: -4px; transform: rotate(45deg);\n  background: inherit; border: inherit; border-top: 0; border-left: 0;\n}\n.fd-map-face[data-look=\"label\"]:is([data-hot], [data-chosen]), .fd-map-mark:hover .fd-map-face[data-look=\"label\"] { background: var(--fd-map-tone); color: var(--fd-map-on); border-color: var(--fd-map-tone); }\n.fd-map-face-text { display: block; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.fd-map-face[data-look=\"pin\"] { width: 30px; height: 40px; }\n.fd-map-face[data-look=\"pin\"] > svg { display: block; width: 30px; height: 40px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3)); }\n.fd-map-face-body { fill: var(--fd-map-tone); stroke: var(--fd-surface); stroke-width: 1.5; }\n.fd-map-face[data-look=\"pin\"] .fd-map-face-icon { position: absolute; left: 7px; top: 6px; width: 16px; height: 16px; color: var(--fd-map-on); }\n.fd-map-face[data-look=\"pin\"] .fd-map-face-icon:empty { left: 10px; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--fd-map-on); }\n.fd-map-face[data-look=\"icon\"] {\n  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;\n  background: var(--fd-map-tone); color: var(--fd-map-on); border: 2px solid var(--fd-surface); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);\n}\n.fd-map-face[data-look=\"icon\"] .fd-map-face-icon { width: 20px; height: 20px; }\n.fd-map-face-turn { position: absolute; inset: -9px; pointer-events: none; }\n.fd-map-face-turn::before { content: \"\"; position: absolute; left: 50%; top: 0; margin-left: -5px; border: 5px solid transparent; border-top: 0; border-bottom: 7px solid var(--fd-map-tone); }\n.fd-map-face-photo {\n  display: grid; place-items: center; width: 40px; height: 40px; box-sizing: border-box; border-radius: 50%; object-fit: cover;\n  border: 3px solid var(--fd-map-tone); background: var(--fd-fill); color: var(--fd-muted); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);\n}\nspan.fd-map-face-photo svg { width: 22px; height: 22px; }\n.fd-map-face[data-look=\"photo\"] .fd-map-face-text {\n  position: absolute; top: calc(100% + 2px); left: 50%; translate: -50% 0; max-width: 14ch; padding: 1px 6px; border-radius: 999px;\n  font-size: 12px; font-weight: 600; background: var(--fd-surface); color: var(--fd-text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);\n}\n.fd-map-face[data-look=\"dot\"] { width: 16px; height: 16px; border-radius: 50%; background: var(--fd-map-tone); border: 2px solid var(--fd-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }\n.fd-map-face:is([data-look=\"icon\"], [data-look=\"dot\"])[data-chosen], .fd-map-face[data-chosen] .fd-map-face-photo { box-shadow: 0 0 0 2px var(--fd-surface), 0 0 0 4px var(--fd-map-tone); }\n.fd-map-face[data-chosen]::before, .fd-map-bubble[data-chosen]::before {\n  content: \"\u2713\"; position: absolute; top: -7px; right: -7px; z-index: 1; width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box;\n  display: grid; place-items: center; font: 700 10px/1 system-ui, sans-serif; background: var(--fd-accent); color: var(--fd-accent-text); border: 1.5px solid var(--fd-surface);\n}\n.fd-map-bubble {\n  position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;\n  background: var(--fd-accent); color: var(--fd-accent-text); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; transition: scale 0.12s;\n  box-shadow: 0 0 0 5px color-mix(in srgb, var(--fd-accent) 30%, transparent), 0 1px 4px rgba(0, 0, 0, 0.3);\n}\n.fd-map-bubble[data-size=\"m\"] { width: 40px; height: 40px; }\n.fd-map-bubble[data-size=\"l\"] { width: 48px; height: 48px; }\n.fd-map-card-popup .leaflet-popup-content-wrapper { padding: 0; border-radius: 10px; overflow: hidden; background: var(--fd-surface); color: var(--fd-text); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.24); }\n.fd-map-card-popup .leaflet-popup-content { margin: 0; font: inherit; font-size: 14px; line-height: 1.4; }\n.fd-map-card-popup .leaflet-popup-tip { background: var(--fd-surface); }\n.fd-map-card { display: grid; }\n.fd-map-card-image { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--fd-fill); }\n.fd-map-card-body { display: grid; gap: 8px; padding: 10px 12px 12px; }\n.fd-map-card-head { display: flex; align-items: flex-start; gap: 8px; }\n.fd-map-card-title { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; }\n.fd-map-card-close {\n  flex: none; width: 28px; height: 28px; margin: -4px -6px -4px 0; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;\n  background: transparent; color: var(--fd-muted); font: 400 20px/1 system-ui, sans-serif; cursor: pointer;\n}\n.fd-map-card[dir=\"rtl\"] .fd-map-card-close { margin: -4px 0 -4px -6px; }\n.fd-map-card-close:hover { background: var(--fd-fill); color: var(--fd-text); }\n.fd-map-card-fields { margin: 0; display: grid; gap: 3px; font-size: 13px; }\n.fd-map-card-fields div { display: flex; justify-content: space-between; gap: 10px; }\n.fd-map-card-fields dt { color: var(--fd-muted); }\n.fd-map-card-fields dd { margin: 0; text-align: end; font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }\n.fd-map-card-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }\n.fd-map-card-choose { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; margin-inline-end: auto; }\n.fd-map-card-choose input { width: 16px; height: 16px; margin: 0; accent-color: var(--fd-accent); }\n.fd-map-card .fd-button { min-height: 30px; padding-inline: 14px; }\n.fd-map-card :focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-map-crowd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 220px; overflow: auto; }\n.fd-map-crowd-item { width: 100%; padding: 6px 8px; border: 0; border-radius: 6px; text-align: start; background: transparent; color: var(--fd-text); font: inherit; font-size: 13px; cursor: pointer; }\n.fd-map-crowd-item:hover { background: var(--fd-accent-soft); }\n.fd-map-here {\n  position: absolute; top: 10px; left: 50%; translate: -50% 0; z-index: 1000; padding: 7px 14px; border-radius: 999px; white-space: nowrap; cursor: pointer;\n  border: 1px solid var(--fd-border); background: var(--fd-surface); color: var(--fd-text); font: inherit; font-size: 13.5px; font-weight: 600; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\n}\n.fd-map-here:hover { color: var(--fd-accent); border-color: var(--fd-accent); }\n.fd-map-here:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n/* The map over the table when the list is too narrow for both side by side: shorter, so the table is in reach. */\n@container fd-list (max-width: 860px) { .fd-list[data-view=\"both\"] .fd-map-list .fd-map-box { height: clamp(260px, 46vh, 420px); } }\n.fd-map-ghost .fd-map-face { pointer-events: none; }\n/* The tools that draw an area to search in: at the map's start, the zoom at its end. */\n.fd-map-draw { position: absolute; top: 8px; left: 8px; z-index: 1000; display: grid; gap: 4px; }\n.fd-map-box[data-side=\"left\"] .fd-map-draw { left: auto; right: 8px; }\n.fd-map-draw button {\n  width: 32px; height: 32px; display: grid; place-items: center; padding: 0; cursor: pointer;\n  background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n}\n.fd-map-draw button svg { width: 18px; height: 18px; }\n.fd-map-draw button:hover, .fd-map-draw button[aria-pressed=\"true\"] { color: var(--fd-accent); border-color: var(--fd-accent); }\n.fd-map-draw button[aria-pressed=\"true\"] { background: var(--fd-accent-soft); }\n.fd-map-draw button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n/* While an area is drawn, the pins let every press through to the map. */\n.fd-map-box[data-drawing] .fd-map-mark { pointer-events: none; }\n/* The drawing's bar starts after the tools. */\n.fd-map-list .fd-map-hint { left: 48px; }\n.fd-map-list .fd-map-box[data-side=\"left\"] .fd-map-hint { left: 52px; right: 48px; }\n.fd-map-list-note {\n  position: absolute; left: 8px; bottom: 28px; z-index: 1000; max-width: calc(100% - 64px); margin: 0; padding: 4px 8px; border-radius: 6px; font-size: 12.5px; line-height: 1.4;\n  background: color-mix(in srgb, var(--fd-surface) 92%, transparent); color: var(--fd-text); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);\n}\n";
+export declare const LIST_MAP_CSS = "\n.fd-map-list { min-width: 0; }\n.fd-map-mark { overflow: visible; }\n.fd-map-mark:focus { outline: none; }\n/* Each mark is as large as its face, stood on its point by its foot, its middle, or the tip of a label's tail. */\n.fd-map-mark.fd-map-foot { translate: -50% -100%; }\n.fd-map-mark.fd-map-middle { translate: -50% -50%; }\n.fd-map-mark.fd-map-tail { translate: -50% calc(-100% - 6px); }\n.fd-map-face {\n  --fd-map-tone: var(--fd-accent); --fd-map-on: var(--fd-accent-text);\n  position: relative; box-sizing: border-box; cursor: pointer; transition: scale 0.12s;\n}\n.fd-map-face[data-tone] { --fd-map-on: var(--fd-surface); }\n.fd-map-face[data-tone=\"info\"] { --fd-map-tone: var(--fd-info); }\n.fd-map-face[data-tone=\"success\"] { --fd-map-tone: var(--fd-success); }\n.fd-map-face[data-tone=\"warning\"] { --fd-map-tone: var(--fd-warning); }\n.fd-map-face[data-tone=\"danger\"] { --fd-map-tone: var(--fd-error); }\n.fd-map-face[data-tone=\"muted\"] { --fd-map-tone: var(--fd-muted); }\n.fd-map-face[data-stands=\"foot\"] { transform-origin: 50% 100%; }\n.fd-map-face[data-stands=\"middle\"] { transform-origin: 50% 50%; }\n.fd-map-face[data-hot], .fd-map-mark:hover .fd-map-face, .fd-map-bubble[data-hot], .fd-map-mark:hover .fd-map-bubble { scale: 1.12; }\n.fd-map-mark:focus-visible .fd-map-face, .fd-map-mark:focus-visible .fd-map-bubble { outline: 2px solid var(--fd-focus); outline-offset: 3px; }\n.fd-map-face-icon { display: block; }\n.fd-map-face-icon svg { display: block; width: 100%; height: 100%; }\n.fd-map-face[data-look=\"label\"] {\n  padding: 4px 9px; border-radius: 999px; font-weight: 700; font-size: 13px; line-height: 1.25; font-variant-numeric: tabular-nums;\n  background: var(--fd-surface); color: var(--fd-text); border: 1.5px solid color-mix(in srgb, var(--fd-text) 20%, transparent); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);\n}\n.fd-map-face[data-look=\"label\"][data-tone] { color: var(--fd-map-tone); border-color: var(--fd-map-tone); }\n.fd-map-face[data-look=\"label\"]::after {\n  content: \"\"; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; margin-left: -4px; transform: rotate(45deg);\n  background: inherit; border: inherit; border-top: 0; border-left: 0;\n}\n.fd-map-face[data-look=\"label\"]:is([data-hot], [data-chosen]), .fd-map-mark:hover .fd-map-face[data-look=\"label\"] { background: var(--fd-map-tone); color: var(--fd-map-on); border-color: var(--fd-map-tone); }\n.fd-map-face-text { display: block; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.fd-map-face[data-look=\"pin\"] { width: 30px; height: 40px; }\n.fd-map-face[data-look=\"pin\"] > svg { display: block; width: 30px; height: 40px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3)); }\n.fd-map-face-body { fill: var(--fd-map-tone); stroke: var(--fd-surface); stroke-width: 1.5; }\n.fd-map-face[data-look=\"pin\"] .fd-map-face-icon { position: absolute; left: 7px; top: 6px; width: 16px; height: 16px; color: var(--fd-map-on); }\n.fd-map-face[data-look=\"pin\"] .fd-map-face-icon:empty { left: 10px; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--fd-map-on); }\n.fd-map-face[data-look=\"icon\"] {\n  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;\n  background: var(--fd-map-tone); color: var(--fd-map-on); border: 2px solid var(--fd-surface); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);\n}\n.fd-map-face[data-look=\"icon\"] .fd-map-face-icon { width: 20px; height: 20px; }\n.fd-map-face-turn { position: absolute; inset: -9px; pointer-events: none; }\n.fd-map-face-turn::before { content: \"\"; position: absolute; left: 50%; top: 0; margin-left: -5px; border: 5px solid transparent; border-top: 0; border-bottom: 7px solid var(--fd-map-tone); }\n.fd-map-face-photo {\n  display: grid; place-items: center; width: 40px; height: 40px; box-sizing: border-box; border-radius: 50%; object-fit: cover;\n  border: 3px solid var(--fd-map-tone); background: var(--fd-fill); color: var(--fd-muted); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);\n}\nspan.fd-map-face-photo svg { width: 22px; height: 22px; }\n.fd-map-face[data-look=\"photo\"] .fd-map-face-text {\n  position: absolute; top: calc(100% + 2px); left: 50%; translate: -50% 0; max-width: 14ch; padding: 1px 6px; border-radius: 999px;\n  font-size: 12px; font-weight: 600; background: var(--fd-surface); color: var(--fd-text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);\n}\n.fd-map-face[data-look=\"dot\"] { width: 16px; height: 16px; border-radius: 50%; background: var(--fd-map-tone); border: 2px solid var(--fd-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }\n.fd-map-face:is([data-look=\"icon\"], [data-look=\"dot\"])[data-chosen], .fd-map-face[data-chosen] .fd-map-face-photo { box-shadow: 0 0 0 2px var(--fd-surface), 0 0 0 4px var(--fd-map-tone); }\n.fd-map-face[data-chosen]::before, .fd-map-bubble[data-chosen]::before {\n  content: \"\u2713\"; position: absolute; top: -7px; right: -7px; z-index: 1; width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box;\n  display: grid; place-items: center; font: 700 10px/1 system-ui, sans-serif; background: var(--fd-accent); color: var(--fd-accent-text); border: 1.5px solid var(--fd-surface);\n}\n.fd-map-bubble {\n  position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;\n  background: var(--fd-accent); color: var(--fd-accent-text); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; transition: scale 0.12s;\n  box-shadow: 0 0 0 5px color-mix(in srgb, var(--fd-accent) 30%, transparent), 0 1px 4px rgba(0, 0, 0, 0.3);\n}\n.fd-map-bubble[data-size=\"m\"] { width: 40px; height: 40px; }\n.fd-map-bubble[data-size=\"l\"] { width: 48px; height: 48px; }\n.fd-map-card-popup .leaflet-popup-content-wrapper { padding: 0; border-radius: 10px; overflow: hidden; background: var(--fd-surface); color: var(--fd-text); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.24); }\n.fd-map-card-popup .leaflet-popup-content { margin: 0; font: inherit; font-size: 14px; line-height: 1.4; }\n.fd-map-card-popup .leaflet-popup-tip { background: var(--fd-surface); }\n.fd-map-card { display: grid; }\n.fd-map-card-image { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--fd-fill); }\n.fd-map-card-body { display: grid; gap: 8px; padding: 10px 12px 12px; }\n.fd-map-card-head { display: flex; align-items: flex-start; gap: 8px; }\n.fd-map-card-title { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; }\n.fd-map-card-close {\n  flex: none; width: 28px; height: 28px; margin: -4px -6px -4px 0; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;\n  background: transparent; color: var(--fd-muted); font: 400 20px/1 system-ui, sans-serif; cursor: pointer;\n}\n.fd-map-card[dir=\"rtl\"] .fd-map-card-close { margin: -4px 0 -4px -6px; }\n.fd-map-card-close:hover { background: var(--fd-fill); color: var(--fd-text); }\n.fd-map-card-fields { margin: 0; display: grid; gap: 3px; font-size: 13px; }\n.fd-map-card-fields div { display: flex; justify-content: space-between; gap: 10px; }\n.fd-map-card-fields dt { color: var(--fd-muted); }\n.fd-map-card-fields dd { margin: 0; text-align: end; font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }\n/* A title linking to the record's page; bare lines, their labels for a screen reader alone; the first line leading. */\n.fd-map-card .fd-map-card-link { color: inherit; text-decoration: none; }\n.fd-map-card .fd-map-card-link:hover { color: var(--fd-accent); text-decoration: underline; }\n.fd-map-card-picture { display: block; }\n.fd-map-card-fields[data-labels] div { display: block; }\n.fd-map-card-fields[data-labels] dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n.fd-map-card-fields[data-labels] dd { text-align: start; font-weight: 400; }\n.fd-map-card-fields[data-lead] > div:first-child dd { font-size: 15.5px; font-weight: 700; color: var(--fd-text); }\n.fd-map-card-fields[data-lead][data-labels] > div + div dd { color: var(--fd-muted); }\n.fd-map-card-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }\n.fd-map-card-choose { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; margin-inline-end: auto; }\n.fd-map-card-choose input { width: 16px; height: 16px; margin: 0; accent-color: var(--fd-accent); }\n.fd-map-card .fd-button { min-height: 30px; padding-inline: 14px; }\n.fd-map-card :focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-map-crowd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 220px; overflow: auto; }\n.fd-map-crowd-item { width: 100%; padding: 6px 8px; border: 0; border-radius: 6px; text-align: start; background: transparent; color: var(--fd-text); font: inherit; font-size: 13px; cursor: pointer; }\nbutton.fd-map-crowd-item:hover { background: var(--fd-accent-soft); }\nspan.fd-map-crowd-item { display: block; cursor: default; }\n.fd-map-here {\n  position: absolute; top: 10px; left: 50%; translate: -50% 0; z-index: 1000; padding: 7px 14px; border-radius: 999px; white-space: nowrap; cursor: pointer;\n  border: 1px solid var(--fd-border); background: var(--fd-surface); color: var(--fd-text); font: inherit; font-size: 13.5px; font-weight: 600; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\n}\n.fd-map-here:hover { color: var(--fd-accent); border-color: var(--fd-accent); }\n.fd-map-here:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n.fd-map-box[data-card] > .fd-map-here { visibility: hidden; }\n/* The map over the table when the list is too narrow for both side by side: shorter, so the table is in reach (unless the page says how tall). */\n@container fd-list (max-width: 860px) { .fd-list[data-view=\"both\"] .fd-map-list:not([data-height]) .fd-map-box { height: clamp(260px, 46vh, 420px); } }\n.fd-map-ghost .fd-map-face { pointer-events: none; }\n/* The tools that draw an area to search in: at the map's start, the zoom at its end. */\n.fd-map-draw { position: absolute; top: 8px; left: 8px; z-index: 1000; display: grid; gap: 4px; }\n.fd-map-box[data-side=\"left\"] .fd-map-draw { left: auto; right: 8px; }\n.fd-map-draw button {\n  width: 32px; height: 32px; display: grid; place-items: center; padding: 0; cursor: pointer;\n  background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n}\n.fd-map-draw button svg { width: 18px; height: 18px; }\n.fd-map-draw button:hover, .fd-map-draw button[aria-pressed=\"true\"] { color: var(--fd-accent); border-color: var(--fd-accent); }\n.fd-map-draw button[aria-pressed=\"true\"] { background: var(--fd-accent-soft); }\n.fd-map-draw button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n/* While an area is drawn, the pins let every press through to the map. */\n.fd-map-box[data-drawing] .fd-map-mark { pointer-events: none; }\n/* The drawing's bar starts after the tools. */\n.fd-map-list .fd-map-hint { left: 48px; }\n.fd-map-list .fd-map-box[data-side=\"left\"] .fd-map-hint { left: 52px; right: 48px; }\n.fd-map-list-note {\n  position: absolute; left: 8px; bottom: 28px; z-index: 1000; max-width: calc(100% - 64px); margin: 0; padding: 4px 8px; border-radius: 6px; font-size: 12.5px; line-height: 1.4;\n  background: color-mix(in srgb, var(--fd-surface) 92%, transparent); color: var(--fd-text); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);\n}\n/* As tall as the element it is put in; in the viewer's list, which gives it no height to fill, as tall as a list's map is. */\n.fd-map-list[data-height=\"fill\"] { height: 100%; }\n.fd-list-map .fd-map-list[data-height=\"fill\"] { height: auto; }\n.fd-list-map .fd-map-list[data-height=\"fill\"] .fd-map-box { height: clamp(320px, 64vh, 640px); }\n/* A map that takes every gesture: one finger pans it, the page does not scroll under it. */\n.fd-map-box.leaflet-container[data-gestures=\"all\"] { touch-action: none; }\n";
 /** The list map's stylesheet, once per document, after the maps' own. */
 export declare function installListMapStyles(doc: Document): void;
+/**
+ * A list's map in a page of its own (`mountListMap`), outside the viewer:
+ * what the viewer's form gives its map — a part hidden stays hidden, words
+ * for a screen reader alone, its buttons, its sizes — on the map's element
+ * alone, so none of it reaches the page round it. Its colours are Fieldia's
+ * tokens, light and dark by the page's colour scheme, in Fieldia's tokens'
+ * layer: a page's own rule for `.fd-map-embed`, of any weight, sets them.
+ */
+export declare const EMBED_CSS = "\n@layer fieldia-tokens {\n.fd-map-embed {\n  --fd-text: light-dark(#1f2328, #e8eaed); --fd-muted: light-dark(#59636e, #a3a9b2); --fd-surface: light-dark(#fff, #1f2329); --fd-border: light-dark(#d0d7de, #3a4048);\n  --fd-accent: light-dark(#1365d9, #5aa2ff); --fd-accent-text: light-dark(#fff, #0b1220); --fd-accent-soft: light-dark(#e6f4ff, #1d2c42); --fd-focus: var(--fd-accent);\n  --fd-info: light-dark(#0b5cad, #7db7ff); --fd-success: light-dark(#2e7d32, #6fd08e); --fd-warning: light-dark(#8a5300, #f2b55c); --fd-error: light-dark(#c62828, #ff8a7a);\n  --fd-control-radius: 6px;\n}\n}\n.fd-map-embed { position: relative; color: var(--fd-text); font-size: 14px; line-height: 1.45; }\n.fd-map-embed *, .fd-map-embed ::before, .fd-map-embed ::after { box-sizing: border-box; }\n.fd-map-embed [hidden] { display: none !important; }\n.fd-map-embed .fd-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n.fd-map-embed .fd-button {\n  font: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 4px 14px;\n  border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); background: var(--fd-surface); color: var(--fd-text);\n}\n.fd-map-embed .fd-button:hover { border-color: var(--fd-accent); color: var(--fd-accent); }\n.fd-map-embed .fd-button-primary { background: var(--fd-accent); border-color: var(--fd-accent); color: var(--fd-accent-text); }\n.fd-map-embed .fd-button-primary:hover { color: var(--fd-accent-text); filter: brightness(1.12); }\n.fd-map-embed .fd-button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n.fd-map-embed .fd-button[aria-busy=\"true\"] { cursor: progress; opacity: 0.7; }\n";
+/** A list's map's own base, once per document, after the list map's stylesheet: a page of its own carries it, the viewer never does. */
+export declare function installEmbedStyles(doc: Document): void;
 /**
  * A form's map, on top of a list map's pins and cards: its label, a route
  * (the part travelled faded), a place whose news is old, the Follow button,
  * and the reader's own place with its button.
  */
-export declare const FORM_MAP_CSS = "\n.fd-map-form { display: grid; gap: 6px; min-width: 0; }\n.fd-map-form-label { margin: 0; font-weight: 600; color: var(--fd-text); }\npath.fd-map-route { stroke: var(--fd-accent); stroke-width: 5; stroke-opacity: 0.85; fill: none; stroke-linecap: round; stroke-linejoin: round; }\npath.fd-map-route-done { stroke: var(--fd-muted); stroke-width: 4; stroke-opacity: 0.55; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 8; }\npath.fd-map-reach { stroke: var(--fd-accent); stroke-width: 2; stroke-dasharray: 6 5; fill: var(--fd-accent); fill-opacity: 0.1; }\npath.fd-map-fence { stroke: var(--fd-warning); stroke-width: 2.5; stroke-dasharray: 2 5; stroke-linecap: round; fill: var(--fd-warning); fill-opacity: 0.12; }\n.fd-map-face[data-stale] { filter: grayscale(1); opacity: 0.75; }\n.fd-map-face-stale {\n  position: absolute; top: calc(100% + 4px); left: 50%; translate: -50% 0; z-index: 1; padding: 1px 6px; border-radius: 999px; white-space: nowrap;\n  font-size: 11.5px; font-weight: 600; background: var(--fd-surface); color: var(--fd-text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);\n}\n.fd-map-face[data-look=\"photo\"] .fd-map-face-stale { top: calc(100% + 26px); }\n.fd-map-here.fd-map-follow { top: auto; bottom: 28px; }\n.fd-map-locate {\n  position: absolute; top: 8px; left: 8px; z-index: 1000; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; cursor: pointer;\n  background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n}\n.fd-map-box[data-side=\"left\"] .fd-map-locate { left: auto; right: 8px; }\n.fd-map-locate svg { width: 18px; height: 18px; }\n.fd-map-locate:hover, .fd-map-locate[aria-pressed=\"true\"] { color: var(--fd-accent); border-color: var(--fd-accent); }\n.fd-map-locate[aria-pressed=\"true\"] { background: var(--fd-accent-soft); }\n.fd-map-locate:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-map-me { box-sizing: border-box; border-radius: 50%; background: var(--fd-info); border: 3px solid var(--fd-surface); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 4px rgba(0, 0, 0, 0.3); }\n";
+export declare const FORM_MAP_CSS = "\n.fd-map-form { display: grid; gap: 6px; min-width: 0; }\n.fd-map-form-label { margin: 0; font-weight: 600; color: var(--fd-text); }\npath.fd-map-route { stroke: var(--fd-accent); stroke-width: 5; stroke-opacity: 0.85; fill: none; stroke-linecap: round; stroke-linejoin: round; }\npath.fd-map-route-done { stroke: var(--fd-muted); stroke-width: 4; stroke-opacity: 0.55; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 8; }\npath.fd-map-reach { stroke: var(--fd-accent); stroke-width: 2; stroke-dasharray: 6 5; fill: var(--fd-accent); fill-opacity: 0.1; }\npath.fd-map-fence { stroke: var(--fd-warning); stroke-width: 2.5; stroke-dasharray: 2 5; stroke-linecap: round; fill: var(--fd-warning); fill-opacity: 0.12; }\n.fd-map-face[data-stale] { filter: grayscale(1); opacity: 0.75; }\n.fd-map-face-stale {\n  position: absolute; top: calc(100% + 4px); left: 50%; translate: -50% 0; z-index: 1; padding: 1px 6px; border-radius: 999px; white-space: nowrap;\n  font-size: 11.5px; font-weight: 600; background: var(--fd-surface); color: var(--fd-text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);\n}\n.fd-map-face[data-look=\"photo\"] .fd-map-face-stale { top: calc(100% + 26px); }\n/* A place that moves, with pins that crowd it gathered under it: their count, itself among them, at its shoulder. */\n.fd-map-count {\n  position: absolute; top: -8px; right: -10px; z-index: 2; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 999px;\n  display: grid; place-items: center; font: 700 11.5px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; pointer-events: none;\n  background: var(--fd-accent); color: var(--fd-accent-text); border: 2px solid var(--fd-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n}\n.fd-map-here.fd-map-follow { top: auto; bottom: 28px; }\n.fd-map-locate {\n  position: absolute; top: 8px; left: 8px; z-index: 1000; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; cursor: pointer;\n  background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n}\n.fd-map-box[data-side=\"left\"] .fd-map-locate { left: auto; right: 8px; }\n.fd-map-locate svg { width: 18px; height: 18px; }\n.fd-map-locate:hover, .fd-map-locate[aria-pressed=\"true\"] { color: var(--fd-accent); border-color: var(--fd-accent); }\n.fd-map-locate[aria-pressed=\"true\"] { background: var(--fd-accent-soft); }\n.fd-map-locate:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-map-me { box-sizing: border-box; border-radius: 50%; background: var(--fd-info); border: 3px solid var(--fd-surface); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 4px rgba(0, 0, 0, 0.3); }\n";
 /** A form's map's stylesheet, once per document, after a list map's. */
 export declare function installFormMapStyles(doc: Document): void;

package/src/lib/styles.d.ts

@@ -14,14 +14,25 @@ export declare function installLeafletStyles(doc: Document, css: string): void;
  * tone, bubbles of pins that crowd, the card a pin opens, "Search this area".
  * Its own stylesheet, so a form with only a place or an area never carries it.
  */
-export declare const LIST_MAP_CSS = "\n.fd-map-list { min-width: 0; }\n.fd-map-mark { overflow: visible; }\n.fd-map-mark:focus { outline: none; }\n/* Each mark is as large as its face, stood on its point by its foot, its middle, or the tip of a label's tail. */\n.fd-map-mark.fd-map-foot { translate: -50% -100%; }\n.fd-map-mark.fd-map-middle { translate: -50% -50%; }\n.fd-map-mark.fd-map-tail { translate: -50% calc(-100% - 6px); }\n.fd-map-face {\n  --fd-map-tone: var(--fd-accent); --fd-map-on: var(--fd-accent-text);\n  position: relative; box-sizing: border-box; cursor: pointer; transition: scale 0.12s;\n}\n.fd-map-face[data-tone] { --fd-map-on: var(--fd-surface); }\n.fd-map-face[data-tone=\"info\"] { --fd-map-tone: var(--fd-info); }\n.fd-map-face[data-tone=\"success\"] { --fd-map-tone: var(--fd-success); }\n.fd-map-face[data-tone=\"warning\"] { --fd-map-tone: var(--fd-warning); }\n.fd-map-face[data-tone=\"danger\"] { --fd-map-tone: var(--fd-error); }\n.fd-map-face[data-tone=\"muted\"] { --fd-map-tone: var(--fd-muted); }\n.fd-map-face[data-stands=\"foot\"] { transform-origin: 50% 100%; }\n.fd-map-face[data-stands=\"middle\"] { transform-origin: 50% 50%; }\n.fd-map-face[data-hot], .fd-map-mark:hover .fd-map-face, .fd-map-bubble[data-hot], .fd-map-mark:hover .fd-map-bubble { scale: 1.12; }\n.fd-map-mark:focus-visible .fd-map-face, .fd-map-mark:focus-visible .fd-map-bubble { outline: 2px solid var(--fd-focus); outline-offset: 3px; }\n.fd-map-face-icon { display: block; }\n.fd-map-face-icon svg { display: block; width: 100%; height: 100%; }\n.fd-map-face[data-look=\"label\"] {\n  padding: 4px 9px; border-radius: 999px; font-weight: 700; font-size: 13px; line-height: 1.25; font-variant-numeric: tabular-nums;\n  background: var(--fd-surface); color: var(--fd-text); border: 1.5px solid color-mix(in srgb, var(--fd-text) 20%, transparent); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);\n}\n.fd-map-face[data-look=\"label\"][data-tone] { color: var(--fd-map-tone); border-color: var(--fd-map-tone); }\n.fd-map-face[data-look=\"label\"]::after {\n  content: \"\"; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; margin-left: -4px; transform: rotate(45deg);\n  background: inherit; border: inherit; border-top: 0; border-left: 0;\n}\n.fd-map-face[data-look=\"label\"]:is([data-hot], [data-chosen]), .fd-map-mark:hover .fd-map-face[data-look=\"label\"] { background: var(--fd-map-tone); color: var(--fd-map-on); border-color: var(--fd-map-tone); }\n.fd-map-face-text { display: block; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.fd-map-face[data-look=\"pin\"] { width: 30px; height: 40px; }\n.fd-map-face[data-look=\"pin\"] > svg { display: block; width: 30px; height: 40px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3)); }\n.fd-map-face-body { fill: var(--fd-map-tone); stroke: var(--fd-surface); stroke-width: 1.5; }\n.fd-map-face[data-look=\"pin\"] .fd-map-face-icon { position: absolute; left: 7px; top: 6px; width: 16px; height: 16px; color: var(--fd-map-on); }\n.fd-map-face[data-look=\"pin\"] .fd-map-face-icon:empty { left: 10px; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--fd-map-on); }\n.fd-map-face[data-look=\"icon\"] {\n  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;\n  background: var(--fd-map-tone); color: var(--fd-map-on); border: 2px solid var(--fd-surface); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);\n}\n.fd-map-face[data-look=\"icon\"] .fd-map-face-icon { width: 20px; height: 20px; }\n.fd-map-face-turn { position: absolute; inset: -9px; pointer-events: none; }\n.fd-map-face-turn::before { content: \"\"; position: absolute; left: 50%; top: 0; margin-left: -5px; border: 5px solid transparent; border-top: 0; border-bottom: 7px solid var(--fd-map-tone); }\n.fd-map-face-photo {\n  display: grid; place-items: center; width: 40px; height: 40px; box-sizing: border-box; border-radius: 50%; object-fit: cover;\n  border: 3px solid var(--fd-map-tone); background: var(--fd-fill); color: var(--fd-muted); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);\n}\nspan.fd-map-face-photo svg { width: 22px; height: 22px; }\n.fd-map-face[data-look=\"photo\"] .fd-map-face-text {\n  position: absolute; top: calc(100% + 2px); left: 50%; translate: -50% 0; max-width: 14ch; padding: 1px 6px; border-radius: 999px;\n  font-size: 12px; font-weight: 600; background: var(--fd-surface); color: var(--fd-text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);\n}\n.fd-map-face[data-look=\"dot\"] { width: 16px; height: 16px; border-radius: 50%; background: var(--fd-map-tone); border: 2px solid var(--fd-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }\n.fd-map-face:is([data-look=\"icon\"], [data-look=\"dot\"])[data-chosen], .fd-map-face[data-chosen] .fd-map-face-photo { box-shadow: 0 0 0 2px var(--fd-surface), 0 0 0 4px var(--fd-map-tone); }\n.fd-map-face[data-chosen]::before, .fd-map-bubble[data-chosen]::before {\n  content: \"\u2713\"; position: absolute; top: -7px; right: -7px; z-index: 1; width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box;\n  display: grid; place-items: center; font: 700 10px/1 system-ui, sans-serif; background: var(--fd-accent); color: var(--fd-accent-text); border: 1.5px solid var(--fd-surface);\n}\n.fd-map-bubble {\n  position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;\n  background: var(--fd-accent); color: var(--fd-accent-text); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; transition: scale 0.12s;\n  box-shadow: 0 0 0 5px color-mix(in srgb, var(--fd-accent) 30%, transparent), 0 1px 4px rgba(0, 0, 0, 0.3);\n}\n.fd-map-bubble[data-size=\"m\"] { width: 40px; height: 40px; }\n.fd-map-bubble[data-size=\"l\"] { width: 48px; height: 48px; }\n.fd-map-card-popup .leaflet-popup-content-wrapper { padding: 0; border-radius: 10px; overflow: hidden; background: var(--fd-surface); color: var(--fd-text); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.24); }\n.fd-map-card-popup .leaflet-popup-content { margin: 0; font: inherit; font-size: 14px; line-height: 1.4; }\n.fd-map-card-popup .leaflet-popup-tip { background: var(--fd-surface); }\n.fd-map-card { display: grid; }\n.fd-map-card-image { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--fd-fill); }\n.fd-map-card-body { display: grid; gap: 8px; padding: 10px 12px 12px; }\n.fd-map-card-head { display: flex; align-items: flex-start; gap: 8px; }\n.fd-map-card-title { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; }\n.fd-map-card-close {\n  flex: none; width: 28px; height: 28px; margin: -4px -6px -4px 0; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;\n  background: transparent; color: var(--fd-muted); font: 400 20px/1 system-ui, sans-serif; cursor: pointer;\n}\n.fd-map-card[dir=\"rtl\"] .fd-map-card-close { margin: -4px 0 -4px -6px; }\n.fd-map-card-close:hover { background: var(--fd-fill); color: var(--fd-text); }\n.fd-map-card-fields { margin: 0; display: grid; gap: 3px; font-size: 13px; }\n.fd-map-card-fields div { display: flex; justify-content: space-between; gap: 10px; }\n.fd-map-card-fields dt { color: var(--fd-muted); }\n.fd-map-card-fields dd { margin: 0; text-align: end; font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }\n.fd-map-card-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }\n.fd-map-card-choose { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; margin-inline-end: auto; }\n.fd-map-card-choose input { width: 16px; height: 16px; margin: 0; accent-color: var(--fd-accent); }\n.fd-map-card .fd-button { min-height: 30px; padding-inline: 14px; }\n.fd-map-card :focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-map-crowd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 220px; overflow: auto; }\n.fd-map-crowd-item { width: 100%; padding: 6px 8px; border: 0; border-radius: 6px; text-align: start; background: transparent; color: var(--fd-text); font: inherit; font-size: 13px; cursor: pointer; }\n.fd-map-crowd-item:hover { background: var(--fd-accent-soft); }\n.fd-map-here {\n  position: absolute; top: 10px; left: 50%; translate: -50% 0; z-index: 1000; padding: 7px 14px; border-radius: 999px; white-space: nowrap; cursor: pointer;\n  border: 1px solid var(--fd-border); background: var(--fd-surface); color: var(--fd-text); font: inherit; font-size: 13.5px; font-weight: 600; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\n}\n.fd-map-here:hover { color: var(--fd-accent); border-color: var(--fd-accent); }\n.fd-map-here:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n/* The map over the table when the list is too narrow for both side by side: shorter, so the table is in reach. */\n@container fd-list (max-width: 860px) { .fd-list[data-view=\"both\"] .fd-map-list .fd-map-box { height: clamp(260px, 46vh, 420px); } }\n.fd-map-ghost .fd-map-face { pointer-events: none; }\n/* The tools that draw an area to search in: at the map's start, the zoom at its end. */\n.fd-map-draw { position: absolute; top: 8px; left: 8px; z-index: 1000; display: grid; gap: 4px; }\n.fd-map-box[data-side=\"left\"] .fd-map-draw { left: auto; right: 8px; }\n.fd-map-draw button {\n  width: 32px; height: 32px; display: grid; place-items: center; padding: 0; cursor: pointer;\n  background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n}\n.fd-map-draw button svg { width: 18px; height: 18px; }\n.fd-map-draw button:hover, .fd-map-draw button[aria-pressed=\"true\"] { color: var(--fd-accent); border-color: var(--fd-accent); }\n.fd-map-draw button[aria-pressed=\"true\"] { background: var(--fd-accent-soft); }\n.fd-map-draw button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n/* While an area is drawn, the pins let every press through to the map. */\n.fd-map-box[data-drawing] .fd-map-mark { pointer-events: none; }\n/* The drawing's bar starts after the tools. */\n.fd-map-list .fd-map-hint { left: 48px; }\n.fd-map-list .fd-map-box[data-side=\"left\"] .fd-map-hint { left: 52px; right: 48px; }\n.fd-map-list-note {\n  position: absolute; left: 8px; bottom: 28px; z-index: 1000; max-width: calc(100% - 64px); margin: 0; padding: 4px 8px; border-radius: 6px; font-size: 12.5px; line-height: 1.4;\n  background: color-mix(in srgb, var(--fd-surface) 92%, transparent); color: var(--fd-text); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);\n}\n";
+export declare const LIST_MAP_CSS = "\n.fd-map-list { min-width: 0; }\n.fd-map-mark { overflow: visible; }\n.fd-map-mark:focus { outline: none; }\n/* Each mark is as large as its face, stood on its point by its foot, its middle, or the tip of a label's tail. */\n.fd-map-mark.fd-map-foot { translate: -50% -100%; }\n.fd-map-mark.fd-map-middle { translate: -50% -50%; }\n.fd-map-mark.fd-map-tail { translate: -50% calc(-100% - 6px); }\n.fd-map-face {\n  --fd-map-tone: var(--fd-accent); --fd-map-on: var(--fd-accent-text);\n  position: relative; box-sizing: border-box; cursor: pointer; transition: scale 0.12s;\n}\n.fd-map-face[data-tone] { --fd-map-on: var(--fd-surface); }\n.fd-map-face[data-tone=\"info\"] { --fd-map-tone: var(--fd-info); }\n.fd-map-face[data-tone=\"success\"] { --fd-map-tone: var(--fd-success); }\n.fd-map-face[data-tone=\"warning\"] { --fd-map-tone: var(--fd-warning); }\n.fd-map-face[data-tone=\"danger\"] { --fd-map-tone: var(--fd-error); }\n.fd-map-face[data-tone=\"muted\"] { --fd-map-tone: var(--fd-muted); }\n.fd-map-face[data-stands=\"foot\"] { transform-origin: 50% 100%; }\n.fd-map-face[data-stands=\"middle\"] { transform-origin: 50% 50%; }\n.fd-map-face[data-hot], .fd-map-mark:hover .fd-map-face, .fd-map-bubble[data-hot], .fd-map-mark:hover .fd-map-bubble { scale: 1.12; }\n.fd-map-mark:focus-visible .fd-map-face, .fd-map-mark:focus-visible .fd-map-bubble { outline: 2px solid var(--fd-focus); outline-offset: 3px; }\n.fd-map-face-icon { display: block; }\n.fd-map-face-icon svg { display: block; width: 100%; height: 100%; }\n.fd-map-face[data-look=\"label\"] {\n  padding: 4px 9px; border-radius: 999px; font-weight: 700; font-size: 13px; line-height: 1.25; font-variant-numeric: tabular-nums;\n  background: var(--fd-surface); color: var(--fd-text); border: 1.5px solid color-mix(in srgb, var(--fd-text) 20%, transparent); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);\n}\n.fd-map-face[data-look=\"label\"][data-tone] { color: var(--fd-map-tone); border-color: var(--fd-map-tone); }\n.fd-map-face[data-look=\"label\"]::after {\n  content: \"\"; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; margin-left: -4px; transform: rotate(45deg);\n  background: inherit; border: inherit; border-top: 0; border-left: 0;\n}\n.fd-map-face[data-look=\"label\"]:is([data-hot], [data-chosen]), .fd-map-mark:hover .fd-map-face[data-look=\"label\"] { background: var(--fd-map-tone); color: var(--fd-map-on); border-color: var(--fd-map-tone); }\n.fd-map-face-text { display: block; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.fd-map-face[data-look=\"pin\"] { width: 30px; height: 40px; }\n.fd-map-face[data-look=\"pin\"] > svg { display: block; width: 30px; height: 40px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3)); }\n.fd-map-face-body { fill: var(--fd-map-tone); stroke: var(--fd-surface); stroke-width: 1.5; }\n.fd-map-face[data-look=\"pin\"] .fd-map-face-icon { position: absolute; left: 7px; top: 6px; width: 16px; height: 16px; color: var(--fd-map-on); }\n.fd-map-face[data-look=\"pin\"] .fd-map-face-icon:empty { left: 10px; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--fd-map-on); }\n.fd-map-face[data-look=\"icon\"] {\n  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;\n  background: var(--fd-map-tone); color: var(--fd-map-on); border: 2px solid var(--fd-surface); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);\n}\n.fd-map-face[data-look=\"icon\"] .fd-map-face-icon { width: 20px; height: 20px; }\n.fd-map-face-turn { position: absolute; inset: -9px; pointer-events: none; }\n.fd-map-face-turn::before { content: \"\"; position: absolute; left: 50%; top: 0; margin-left: -5px; border: 5px solid transparent; border-top: 0; border-bottom: 7px solid var(--fd-map-tone); }\n.fd-map-face-photo {\n  display: grid; place-items: center; width: 40px; height: 40px; box-sizing: border-box; border-radius: 50%; object-fit: cover;\n  border: 3px solid var(--fd-map-tone); background: var(--fd-fill); color: var(--fd-muted); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);\n}\nspan.fd-map-face-photo svg { width: 22px; height: 22px; }\n.fd-map-face[data-look=\"photo\"] .fd-map-face-text {\n  position: absolute; top: calc(100% + 2px); left: 50%; translate: -50% 0; max-width: 14ch; padding: 1px 6px; border-radius: 999px;\n  font-size: 12px; font-weight: 600; background: var(--fd-surface); color: var(--fd-text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);\n}\n.fd-map-face[data-look=\"dot\"] { width: 16px; height: 16px; border-radius: 50%; background: var(--fd-map-tone); border: 2px solid var(--fd-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }\n.fd-map-face:is([data-look=\"icon\"], [data-look=\"dot\"])[data-chosen], .fd-map-face[data-chosen] .fd-map-face-photo { box-shadow: 0 0 0 2px var(--fd-surface), 0 0 0 4px var(--fd-map-tone); }\n.fd-map-face[data-chosen]::before, .fd-map-bubble[data-chosen]::before {\n  content: \"\u2713\"; position: absolute; top: -7px; right: -7px; z-index: 1; width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box;\n  display: grid; place-items: center; font: 700 10px/1 system-ui, sans-serif; background: var(--fd-accent); color: var(--fd-accent-text); border: 1.5px solid var(--fd-surface);\n}\n.fd-map-bubble {\n  position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;\n  background: var(--fd-accent); color: var(--fd-accent-text); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; transition: scale 0.12s;\n  box-shadow: 0 0 0 5px color-mix(in srgb, var(--fd-accent) 30%, transparent), 0 1px 4px rgba(0, 0, 0, 0.3);\n}\n.fd-map-bubble[data-size=\"m\"] { width: 40px; height: 40px; }\n.fd-map-bubble[data-size=\"l\"] { width: 48px; height: 48px; }\n.fd-map-card-popup .leaflet-popup-content-wrapper { padding: 0; border-radius: 10px; overflow: hidden; background: var(--fd-surface); color: var(--fd-text); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.24); }\n.fd-map-card-popup .leaflet-popup-content { margin: 0; font: inherit; font-size: 14px; line-height: 1.4; }\n.fd-map-card-popup .leaflet-popup-tip { background: var(--fd-surface); }\n.fd-map-card { display: grid; }\n.fd-map-card-image { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--fd-fill); }\n.fd-map-card-body { display: grid; gap: 8px; padding: 10px 12px 12px; }\n.fd-map-card-head { display: flex; align-items: flex-start; gap: 8px; }\n.fd-map-card-title { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; }\n.fd-map-card-close {\n  flex: none; width: 28px; height: 28px; margin: -4px -6px -4px 0; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;\n  background: transparent; color: var(--fd-muted); font: 400 20px/1 system-ui, sans-serif; cursor: pointer;\n}\n.fd-map-card[dir=\"rtl\"] .fd-map-card-close { margin: -4px 0 -4px -6px; }\n.fd-map-card-close:hover { background: var(--fd-fill); color: var(--fd-text); }\n.fd-map-card-fields { margin: 0; display: grid; gap: 3px; font-size: 13px; }\n.fd-map-card-fields div { display: flex; justify-content: space-between; gap: 10px; }\n.fd-map-card-fields dt { color: var(--fd-muted); }\n.fd-map-card-fields dd { margin: 0; text-align: end; font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }\n/* A title linking to the record's page; bare lines, their labels for a screen reader alone; the first line leading. */\n.fd-map-card .fd-map-card-link { color: inherit; text-decoration: none; }\n.fd-map-card .fd-map-card-link:hover { color: var(--fd-accent); text-decoration: underline; }\n.fd-map-card-picture { display: block; }\n.fd-map-card-fields[data-labels] div { display: block; }\n.fd-map-card-fields[data-labels] dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n.fd-map-card-fields[data-labels] dd { text-align: start; font-weight: 400; }\n.fd-map-card-fields[data-lead] > div:first-child dd { font-size: 15.5px; font-weight: 700; color: var(--fd-text); }\n.fd-map-card-fields[data-lead][data-labels] > div + div dd { color: var(--fd-muted); }\n.fd-map-card-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }\n.fd-map-card-choose { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; margin-inline-end: auto; }\n.fd-map-card-choose input { width: 16px; height: 16px; margin: 0; accent-color: var(--fd-accent); }\n.fd-map-card .fd-button { min-height: 30px; padding-inline: 14px; }\n.fd-map-card :focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-map-crowd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 220px; overflow: auto; }\n.fd-map-crowd-item { width: 100%; padding: 6px 8px; border: 0; border-radius: 6px; text-align: start; background: transparent; color: var(--fd-text); font: inherit; font-size: 13px; cursor: pointer; }\nbutton.fd-map-crowd-item:hover { background: var(--fd-accent-soft); }\nspan.fd-map-crowd-item { display: block; cursor: default; }\n.fd-map-here {\n  position: absolute; top: 10px; left: 50%; translate: -50% 0; z-index: 1000; padding: 7px 14px; border-radius: 999px; white-space: nowrap; cursor: pointer;\n  border: 1px solid var(--fd-border); background: var(--fd-surface); color: var(--fd-text); font: inherit; font-size: 13.5px; font-weight: 600; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\n}\n.fd-map-here:hover { color: var(--fd-accent); border-color: var(--fd-accent); }\n.fd-map-here:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n.fd-map-box[data-card] > .fd-map-here { visibility: hidden; }\n/* The map over the table when the list is too narrow for both side by side: shorter, so the table is in reach (unless the page says how tall). */\n@container fd-list (max-width: 860px) { .fd-list[data-view=\"both\"] .fd-map-list:not([data-height]) .fd-map-box { height: clamp(260px, 46vh, 420px); } }\n.fd-map-ghost .fd-map-face { pointer-events: none; }\n/* The tools that draw an area to search in: at the map's start, the zoom at its end. */\n.fd-map-draw { position: absolute; top: 8px; left: 8px; z-index: 1000; display: grid; gap: 4px; }\n.fd-map-box[data-side=\"left\"] .fd-map-draw { left: auto; right: 8px; }\n.fd-map-draw button {\n  width: 32px; height: 32px; display: grid; place-items: center; padding: 0; cursor: pointer;\n  background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n}\n.fd-map-draw button svg { width: 18px; height: 18px; }\n.fd-map-draw button:hover, .fd-map-draw button[aria-pressed=\"true\"] { color: var(--fd-accent); border-color: var(--fd-accent); }\n.fd-map-draw button[aria-pressed=\"true\"] { background: var(--fd-accent-soft); }\n.fd-map-draw button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n/* While an area is drawn, the pins let every press through to the map. */\n.fd-map-box[data-drawing] .fd-map-mark { pointer-events: none; }\n/* The drawing's bar starts after the tools. */\n.fd-map-list .fd-map-hint { left: 48px; }\n.fd-map-list .fd-map-box[data-side=\"left\"] .fd-map-hint { left: 52px; right: 48px; }\n.fd-map-list-note {\n  position: absolute; left: 8px; bottom: 28px; z-index: 1000; max-width: calc(100% - 64px); margin: 0; padding: 4px 8px; border-radius: 6px; font-size: 12.5px; line-height: 1.4;\n  background: color-mix(in srgb, var(--fd-surface) 92%, transparent); color: var(--fd-text); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);\n}\n/* As tall as the element it is put in; in the viewer's list, which gives it no height to fill, as tall as a list's map is. */\n.fd-map-list[data-height=\"fill\"] { height: 100%; }\n.fd-list-map .fd-map-list[data-height=\"fill\"] { height: auto; }\n.fd-list-map .fd-map-list[data-height=\"fill\"] .fd-map-box { height: clamp(320px, 64vh, 640px); }\n/* A map that takes every gesture: one finger pans it, the page does not scroll under it. */\n.fd-map-box.leaflet-container[data-gestures=\"all\"] { touch-action: none; }\n";
 /** The list map's stylesheet, once per document, after the maps' own. */
 export declare function installListMapStyles(doc: Document): void;
+/**
+ * A list's map in a page of its own (`mountListMap`), outside the viewer:
+ * what the viewer's form gives its map — a part hidden stays hidden, words
+ * for a screen reader alone, its buttons, its sizes — on the map's element
+ * alone, so none of it reaches the page round it. Its colours are Fieldia's
+ * tokens, light and dark by the page's colour scheme, in Fieldia's tokens'
+ * layer: a page's own rule for `.fd-map-embed`, of any weight, sets them.
+ */
+export declare const EMBED_CSS = "\n@layer fieldia-tokens {\n.fd-map-embed {\n  --fd-text: light-dark(#1f2328, #e8eaed); --fd-muted: light-dark(#59636e, #a3a9b2); --fd-surface: light-dark(#fff, #1f2329); --fd-border: light-dark(#d0d7de, #3a4048);\n  --fd-accent: light-dark(#1365d9, #5aa2ff); --fd-accent-text: light-dark(#fff, #0b1220); --fd-accent-soft: light-dark(#e6f4ff, #1d2c42); --fd-focus: var(--fd-accent);\n  --fd-info: light-dark(#0b5cad, #7db7ff); --fd-success: light-dark(#2e7d32, #6fd08e); --fd-warning: light-dark(#8a5300, #f2b55c); --fd-error: light-dark(#c62828, #ff8a7a);\n  --fd-control-radius: 6px;\n}\n}\n.fd-map-embed { position: relative; color: var(--fd-text); font-size: 14px; line-height: 1.45; }\n.fd-map-embed *, .fd-map-embed ::before, .fd-map-embed ::after { box-sizing: border-box; }\n.fd-map-embed [hidden] { display: none !important; }\n.fd-map-embed .fd-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n.fd-map-embed .fd-button {\n  font: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 4px 14px;\n  border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); background: var(--fd-surface); color: var(--fd-text);\n}\n.fd-map-embed .fd-button:hover { border-color: var(--fd-accent); color: var(--fd-accent); }\n.fd-map-embed .fd-button-primary { background: var(--fd-accent); border-color: var(--fd-accent); color: var(--fd-accent-text); }\n.fd-map-embed .fd-button-primary:hover { color: var(--fd-accent-text); filter: brightness(1.12); }\n.fd-map-embed .fd-button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n.fd-map-embed .fd-button[aria-busy=\"true\"] { cursor: progress; opacity: 0.7; }\n";
+/** A list's map's own base, once per document, after the list map's stylesheet: a page of its own carries it, the viewer never does. */
+export declare function installEmbedStyles(doc: Document): void;
 /**
  * A form's map, on top of a list map's pins and cards: its label, a route
  * (the part travelled faded), a place whose news is old, the Follow button,
  * and the reader's own place with its button.
  */
-export declare const FORM_MAP_CSS = "\n.fd-map-form { display: grid; gap: 6px; min-width: 0; }\n.fd-map-form-label { margin: 0; font-weight: 600; color: var(--fd-text); }\npath.fd-map-route { stroke: var(--fd-accent); stroke-width: 5; stroke-opacity: 0.85; fill: none; stroke-linecap: round; stroke-linejoin: round; }\npath.fd-map-route-done { stroke: var(--fd-muted); stroke-width: 4; stroke-opacity: 0.55; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 8; }\npath.fd-map-reach { stroke: var(--fd-accent); stroke-width: 2; stroke-dasharray: 6 5; fill: var(--fd-accent); fill-opacity: 0.1; }\npath.fd-map-fence { stroke: var(--fd-warning); stroke-width: 2.5; stroke-dasharray: 2 5; stroke-linecap: round; fill: var(--fd-warning); fill-opacity: 0.12; }\n.fd-map-face[data-stale] { filter: grayscale(1); opacity: 0.75; }\n.fd-map-face-stale {\n  position: absolute; top: calc(100% + 4px); left: 50%; translate: -50% 0; z-index: 1; padding: 1px 6px; border-radius: 999px; white-space: nowrap;\n  font-size: 11.5px; font-weight: 600; background: var(--fd-surface); color: var(--fd-text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);\n}\n.fd-map-face[data-look=\"photo\"] .fd-map-face-stale { top: calc(100% + 26px); }\n.fd-map-here.fd-map-follow { top: auto; bottom: 28px; }\n.fd-map-locate {\n  position: absolute; top: 8px; left: 8px; z-index: 1000; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; cursor: pointer;\n  background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n}\n.fd-map-box[data-side=\"left\"] .fd-map-locate { left: auto; right: 8px; }\n.fd-map-locate svg { width: 18px; height: 18px; }\n.fd-map-locate:hover, .fd-map-locate[aria-pressed=\"true\"] { color: var(--fd-accent); border-color: var(--fd-accent); }\n.fd-map-locate[aria-pressed=\"true\"] { background: var(--fd-accent-soft); }\n.fd-map-locate:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-map-me { box-sizing: border-box; border-radius: 50%; background: var(--fd-info); border: 3px solid var(--fd-surface); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 4px rgba(0, 0, 0, 0.3); }\n";
+export declare const FORM_MAP_CSS = "\n.fd-map-form { display: grid; gap: 6px; min-width: 0; }\n.fd-map-form-label { margin: 0; font-weight: 600; color: var(--fd-text); }\npath.fd-map-route { stroke: var(--fd-accent); stroke-width: 5; stroke-opacity: 0.85; fill: none; stroke-linecap: round; stroke-linejoin: round; }\npath.fd-map-route-done { stroke: var(--fd-muted); stroke-width: 4; stroke-opacity: 0.55; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 8; }\npath.fd-map-reach { stroke: var(--fd-accent); stroke-width: 2; stroke-dasharray: 6 5; fill: var(--fd-accent); fill-opacity: 0.1; }\npath.fd-map-fence { stroke: var(--fd-warning); stroke-width: 2.5; stroke-dasharray: 2 5; stroke-linecap: round; fill: var(--fd-warning); fill-opacity: 0.12; }\n.fd-map-face[data-stale] { filter: grayscale(1); opacity: 0.75; }\n.fd-map-face-stale {\n  position: absolute; top: calc(100% + 4px); left: 50%; translate: -50% 0; z-index: 1; padding: 1px 6px; border-radius: 999px; white-space: nowrap;\n  font-size: 11.5px; font-weight: 600; background: var(--fd-surface); color: var(--fd-text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);\n}\n.fd-map-face[data-look=\"photo\"] .fd-map-face-stale { top: calc(100% + 26px); }\n/* A place that moves, with pins that crowd it gathered under it: their count, itself among them, at its shoulder. */\n.fd-map-count {\n  position: absolute; top: -8px; right: -10px; z-index: 2; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 999px;\n  display: grid; place-items: center; font: 700 11.5px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; pointer-events: none;\n  background: var(--fd-accent); color: var(--fd-accent-text); border: 2px solid var(--fd-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n}\n.fd-map-here.fd-map-follow { top: auto; bottom: 28px; }\n.fd-map-locate {\n  position: absolute; top: 8px; left: 8px; z-index: 1000; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; cursor: pointer;\n  background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n}\n.fd-map-box[data-side=\"left\"] .fd-map-locate { left: auto; right: 8px; }\n.fd-map-locate svg { width: 18px; height: 18px; }\n.fd-map-locate:hover, .fd-map-locate[aria-pressed=\"true\"] { color: var(--fd-accent); border-color: var(--fd-accent); }\n.fd-map-locate[aria-pressed=\"true\"] { background: var(--fd-accent-soft); }\n.fd-map-locate:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-map-me { box-sizing: border-box; border-radius: 50%; background: var(--fd-info); border: 3px solid var(--fd-surface); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 4px rgba(0, 0, 0, 0.3); }\n";
 /** A form's map's stylesheet, once per document, after a list map's. */
 export declare function installFormMapStyles(doc: Document): void;

package/src/lib/styles.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FORM_MAP_CSS = exports.LIST_MAP_CSS = exports.MAP_CSS = void 0;
+exports.FORM_MAP_CSS = exports.EMBED_CSS = exports.LIST_MAP_CSS = exports.MAP_CSS = void 0;
 exports.installMapStyles = installMapStyles;
 exports.installLeafletStyles = installLeafletStyles;
 exports.installListMapStyles = installListMapStyles;
+exports.installEmbedStyles = installEmbedStyles;
 exports.installFormMapStyles = installFormMapStyles;
 /**
  * The maps in Fieldia's colours: every colour a token, so a theme, a host's
@@ -229,6 +230,15 @@ span.fd-map-face-photo svg { width: 22px; height: 22px; }
 .fd-map-card-fields div { display: flex; justify-content: space-between; gap: 10px; }
 .fd-map-card-fields dt { color: var(--fd-muted); }
 .fd-map-card-fields dd { margin: 0; text-align: end; font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
+/* A title linking to the record's page; bare lines, their labels for a screen reader alone; the first line leading. */
+.fd-map-card .fd-map-card-link { color: inherit; text-decoration: none; }
+.fd-map-card .fd-map-card-link:hover { color: var(--fd-accent); text-decoration: underline; }
+.fd-map-card-picture { display: block; }
+.fd-map-card-fields[data-labels] div { display: block; }
+.fd-map-card-fields[data-labels] dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+.fd-map-card-fields[data-labels] dd { text-align: start; font-weight: 400; }
+.fd-map-card-fields[data-lead] > div:first-child dd { font-size: 15.5px; font-weight: 700; color: var(--fd-text); }
+.fd-map-card-fields[data-lead][data-labels] > div + div dd { color: var(--fd-muted); }
 .fd-map-card-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
 .fd-map-card-choose { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; margin-inline-end: auto; }
 .fd-map-card-choose input { width: 16px; height: 16px; margin: 0; accent-color: var(--fd-accent); }
@@ -236,15 +246,17 @@ span.fd-map-face-photo svg { width: 22px; height: 22px; }
 .fd-map-card :focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }
 .fd-map-crowd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 220px; overflow: auto; }
 .fd-map-crowd-item { width: 100%; padding: 6px 8px; border: 0; border-radius: 6px; text-align: start; background: transparent; color: var(--fd-text); font: inherit; font-size: 13px; cursor: pointer; }
-.fd-map-crowd-item:hover { background: var(--fd-accent-soft); }
+button.fd-map-crowd-item:hover { background: var(--fd-accent-soft); }
+span.fd-map-crowd-item { display: block; cursor: default; }
 .fd-map-here {
   position: absolute; top: 10px; left: 50%; translate: -50% 0; z-index: 1000; padding: 7px 14px; border-radius: 999px; white-space: nowrap; cursor: pointer;
   border: 1px solid var(--fd-border); background: var(--fd-surface); color: var(--fd-text); font: inherit; font-size: 13.5px; font-weight: 600; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
 }
 .fd-map-here:hover { color: var(--fd-accent); border-color: var(--fd-accent); }
 .fd-map-here:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }
-/* The map over the table when the list is too narrow for both side by side: shorter, so the table is in reach. */
-@container fd-list (max-width: 860px) { .fd-list[data-view="both"] .fd-map-list .fd-map-box { height: clamp(260px, 46vh, 420px); } }
+.fd-map-box[data-card] > .fd-map-here { visibility: hidden; }
+/* The map over the table when the list is too narrow for both side by side: shorter, so the table is in reach (unless the page says how tall). */
+@container fd-list (max-width: 860px) { .fd-list[data-view="both"] .fd-map-list:not([data-height]) .fd-map-box { height: clamp(260px, 46vh, 420px); } }
 .fd-map-ghost .fd-map-face { pointer-events: none; }
 /* The tools that draw an area to search in: at the map's start, the zoom at its end. */
 .fd-map-draw { position: absolute; top: 8px; left: 8px; z-index: 1000; display: grid; gap: 4px; }
@@ -266,6 +278,12 @@ span.fd-map-face-photo svg { width: 22px; height: 22px; }
   position: absolute; left: 8px; bottom: 28px; z-index: 1000; max-width: calc(100% - 64px); margin: 0; padding: 4px 8px; border-radius: 6px; font-size: 12.5px; line-height: 1.4;
   background: color-mix(in srgb, var(--fd-surface) 92%, transparent); color: var(--fd-text); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
 }
+/* As tall as the element it is put in; in the viewer's list, which gives it no height to fill, as tall as a list's map is. */
+.fd-map-list[data-height="fill"] { height: 100%; }
+.fd-list-map .fd-map-list[data-height="fill"] { height: auto; }
+.fd-list-map .fd-map-list[data-height="fill"] .fd-map-box { height: clamp(320px, 64vh, 640px); }
+/* A map that takes every gesture: one finger pans it, the page does not scroll under it. */
+.fd-map-box.leaflet-container[data-gestures="all"] { touch-action: none; }
 `;
 /** The list map's stylesheet, once per document, after the maps' own. */
 function installListMapStyles(doc) {
@@ -277,6 +295,47 @@ function installListMapStyles(doc) {
     own.textContent = exports.LIST_MAP_CSS;
     doc.getElementById('fieldia-map-styles')?.after(own);
 }
+/**
+ * A list's map in a page of its own (`mountListMap`), outside the viewer:
+ * what the viewer's form gives its map — a part hidden stays hidden, words
+ * for a screen reader alone, its buttons, its sizes — on the map's element
+ * alone, so none of it reaches the page round it. Its colours are Fieldia's
+ * tokens, light and dark by the page's colour scheme, in Fieldia's tokens'
+ * layer: a page's own rule for `.fd-map-embed`, of any weight, sets them.
+ */
+exports.EMBED_CSS = `
+@layer fieldia-tokens {
+.fd-map-embed {
+  --fd-text: light-dark(#1f2328, #e8eaed); --fd-muted: light-dark(#59636e, #a3a9b2); --fd-surface: light-dark(#fff, #1f2329); --fd-border: light-dark(#d0d7de, #3a4048);
+  --fd-accent: light-dark(#1365d9, #5aa2ff); --fd-accent-text: light-dark(#fff, #0b1220); --fd-accent-soft: light-dark(#e6f4ff, #1d2c42); --fd-focus: var(--fd-accent);
+  --fd-info: light-dark(#0b5cad, #7db7ff); --fd-success: light-dark(#2e7d32, #6fd08e); --fd-warning: light-dark(#8a5300, #f2b55c); --fd-error: light-dark(#c62828, #ff8a7a);
+  --fd-control-radius: 6px;
+}
+}
+.fd-map-embed { position: relative; color: var(--fd-text); font-size: 14px; line-height: 1.45; }
+.fd-map-embed *, .fd-map-embed ::before, .fd-map-embed ::after { box-sizing: border-box; }
+.fd-map-embed [hidden] { display: none !important; }
+.fd-map-embed .fd-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+.fd-map-embed .fd-button {
+  font: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 4px 14px;
+  border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); background: var(--fd-surface); color: var(--fd-text);
+}
+.fd-map-embed .fd-button:hover { border-color: var(--fd-accent); color: var(--fd-accent); }
+.fd-map-embed .fd-button-primary { background: var(--fd-accent); border-color: var(--fd-accent); color: var(--fd-accent-text); }
+.fd-map-embed .fd-button-primary:hover { color: var(--fd-accent-text); filter: brightness(1.12); }
+.fd-map-embed .fd-button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }
+.fd-map-embed .fd-button[aria-busy="true"] { cursor: progress; opacity: 0.7; }
+`;
+/** A list's map's own base, once per document, after the list map's stylesheet: a page of its own carries it, the viewer never does. */
+function installEmbedStyles(doc) {
+    installListMapStyles(doc);
+    if (doc.getElementById('fieldia-map-embed-styles'))
+        return;
+    const own = doc.createElement('style');
+    own.id = 'fieldia-map-embed-styles';
+    own.textContent = exports.EMBED_CSS;
+    doc.getElementById('fieldia-list-map-styles')?.after(own);
+}
 /**
  * A form's map, on top of a list map's pins and cards: its label, a route
  * (the part travelled faded), a place whose news is old, the Follow button,
@@ -295,6 +354,12 @@ path.fd-map-fence { stroke: var(--fd-warning); stroke-width: 2.5; stroke-dasharr
   font-size: 11.5px; font-weight: 600; background: var(--fd-surface); color: var(--fd-text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
 }
 .fd-map-face[data-look="photo"] .fd-map-face-stale { top: calc(100% + 26px); }
+/* A place that moves, with pins that crowd it gathered under it: their count, itself among them, at its shoulder. */
+.fd-map-count {
+  position: absolute; top: -8px; right: -10px; z-index: 2; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 999px;
+  display: grid; place-items: center; font: 700 11.5px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; pointer-events: none;
+  background: var(--fd-accent); color: var(--fd-accent-text); border: 2px solid var(--fd-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
 .fd-map-here.fd-map-follow { top: auto; bottom: 28px; }
 .fd-map-locate {
   position: absolute; top: 8px; left: 8px; z-index: 1000; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; cursor: pointer;

package/src/lib/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../libs/map/src/lib/styles.ts"],"names":[],"mappings":";;;AA+GA,4CAOC;AAGD,oDAQC;AAsID,oDAOC;AAkCD,oDAOC;AAvTD;;;;;GAKG;AACU,QAAA,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsGtB,CAAC;AAEF,0HAA0H;AAC1H,SAAgB,gBAAgB,CAAC,GAAa;IAC5C,IAAI,GAAG,CAAC,cAAc,CAAC,oBAAoB,CAAC;QAAE,OAAO;IACrD,MAAM,GAAG,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACvC,GAAG,CAAC,EAAE,GAAG,oBAAoB,CAAC;IAC9B,GAAG,CAAC,WAAW,GAAG,eAAO,CAAC;IAC1B,4EAA4E;IAC5E,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;AACxB,CAAC;AAED,8GAA8G;AAC9G,SAAgB,oBAAoB,CAAC,GAAa,EAAE,GAAW;IAC7D,IAAI,GAAG,CAAC,cAAc,CAAC,wBAAwB,CAAC;QAAE,OAAO;IACzD,MAAM,OAAO,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC3C,OAAO,CAAC,EAAE,GAAG,wBAAwB,CAAC;IACtC,OAAO,CAAC,WAAW,GAAG,GAAG,CAAC;IAC1B,MAAM,GAAG,GAAG,GAAG,CAAC,cAAc,CAAC,oBAAoB,CAAC,CAAC;IACrD,IAAI,GAAG;QAAE,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;;QACxB,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;AACjC,CAAC;AAED;;;;GAIG;AACU,QAAA,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4H3B,CAAC;AAEF,yEAAyE;AACzE,SAAgB,oBAAoB,CAAC,GAAa;IAChD,gBAAgB,CAAC,GAAG,CAAC,CAAC;IACtB,IAAI,GAAG,CAAC,cAAc,CAAC,yBAAyB,CAAC;QAAE,OAAO;IAC1D,MAAM,GAAG,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACvC,GAAG,CAAC,EAAE,GAAG,yBAAyB,CAAC;IACnC,GAAG,CAAC,WAAW,GAAG,oBAAY,CAAC;IAC/B,GAAG,CAAC,cAAc,CAAC,oBAAoB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;AACvD,CAAC;AAED;;;;GAIG;AACU,QAAA,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;CAwB3B,CAAC;AAEF,wEAAwE;AACxE,SAAgB,oBAAoB,CAAC,GAAa;IAChD,oBAAoB,CAAC,GAAG,CAAC,CAAC;IAC1B,IAAI,GAAG,CAAC,cAAc,CAAC,yBAAyB,CAAC;QAAE,OAAO;IAC1D,MAAM,GAAG,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACvC,GAAG,CAAC,EAAE,GAAG,yBAAyB,CAAC;IACnC,GAAG,CAAC,WAAW,GAAG,oBAAY,CAAC;IAC/B,GAAG,CAAC,cAAc,CAAC,yBAAyB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;AAC5D,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../libs/map/src/lib/styles.ts"],"names":[],"mappings":"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"}

package/src/lib/styles.mjs

@@ -222,6 +222,15 @@ span.fd-map-face-photo svg { width: 22px; height: 22px; }
 .fd-map-card-fields div { display: flex; justify-content: space-between; gap: 10px; }
 .fd-map-card-fields dt { color: var(--fd-muted); }
 .fd-map-card-fields dd { margin: 0; text-align: end; font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
+/* A title linking to the record's page; bare lines, their labels for a screen reader alone; the first line leading. */
+.fd-map-card .fd-map-card-link { color: inherit; text-decoration: none; }
+.fd-map-card .fd-map-card-link:hover { color: var(--fd-accent); text-decoration: underline; }
+.fd-map-card-picture { display: block; }
+.fd-map-card-fields[data-labels] div { display: block; }
+.fd-map-card-fields[data-labels] dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+.fd-map-card-fields[data-labels] dd { text-align: start; font-weight: 400; }
+.fd-map-card-fields[data-lead] > div:first-child dd { font-size: 15.5px; font-weight: 700; color: var(--fd-text); }
+.fd-map-card-fields[data-lead][data-labels] > div + div dd { color: var(--fd-muted); }
 .fd-map-card-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
 .fd-map-card-choose { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; margin-inline-end: auto; }
 .fd-map-card-choose input { width: 16px; height: 16px; margin: 0; accent-color: var(--fd-accent); }
@@ -229,15 +238,17 @@ span.fd-map-face-photo svg { width: 22px; height: 22px; }
 .fd-map-card :focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }
 .fd-map-crowd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 220px; overflow: auto; }
 .fd-map-crowd-item { width: 100%; padding: 6px 8px; border: 0; border-radius: 6px; text-align: start; background: transparent; color: var(--fd-text); font: inherit; font-size: 13px; cursor: pointer; }
-.fd-map-crowd-item:hover { background: var(--fd-accent-soft); }
+button.fd-map-crowd-item:hover { background: var(--fd-accent-soft); }
+span.fd-map-crowd-item { display: block; cursor: default; }
 .fd-map-here {
   position: absolute; top: 10px; left: 50%; translate: -50% 0; z-index: 1000; padding: 7px 14px; border-radius: 999px; white-space: nowrap; cursor: pointer;
   border: 1px solid var(--fd-border); background: var(--fd-surface); color: var(--fd-text); font: inherit; font-size: 13.5px; font-weight: 600; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
 }
 .fd-map-here:hover { color: var(--fd-accent); border-color: var(--fd-accent); }
 .fd-map-here:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }
-/* The map over the table when the list is too narrow for both side by side: shorter, so the table is in reach. */
-@container fd-list (max-width: 860px) { .fd-list[data-view="both"] .fd-map-list .fd-map-box { height: clamp(260px, 46vh, 420px); } }
+.fd-map-box[data-card] > .fd-map-here { visibility: hidden; }
+/* The map over the table when the list is too narrow for both side by side: shorter, so the table is in reach (unless the page says how tall). */
+@container fd-list (max-width: 860px) { .fd-list[data-view="both"] .fd-map-list:not([data-height]) .fd-map-box { height: clamp(260px, 46vh, 420px); } }
 .fd-map-ghost .fd-map-face { pointer-events: none; }
 /* The tools that draw an area to search in: at the map's start, the zoom at its end. */
 .fd-map-draw { position: absolute; top: 8px; left: 8px; z-index: 1000; display: grid; gap: 4px; }
@@ -259,6 +270,12 @@ span.fd-map-face-photo svg { width: 22px; height: 22px; }
   position: absolute; left: 8px; bottom: 28px; z-index: 1000; max-width: calc(100% - 64px); margin: 0; padding: 4px 8px; border-radius: 6px; font-size: 12.5px; line-height: 1.4;
   background: color-mix(in srgb, var(--fd-surface) 92%, transparent); color: var(--fd-text); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
 }
+/* As tall as the element it is put in; in the viewer's list, which gives it no height to fill, as tall as a list's map is. */
+.fd-map-list[data-height="fill"] { height: 100%; }
+.fd-list-map .fd-map-list[data-height="fill"] { height: auto; }
+.fd-list-map .fd-map-list[data-height="fill"] .fd-map-box { height: clamp(320px, 64vh, 640px); }
+/* A map that takes every gesture: one finger pans it, the page does not scroll under it. */
+.fd-map-box.leaflet-container[data-gestures="all"] { touch-action: none; }
 `;
 /** The list map's stylesheet, once per document, after the maps' own. */
 export function installListMapStyles(doc) {
@@ -270,6 +287,47 @@ export function installListMapStyles(doc) {
     own.textContent = LIST_MAP_CSS;
     doc.getElementById('fieldia-map-styles')?.after(own);
 }
+/**
+ * A list's map in a page of its own (`mountListMap`), outside the viewer:
+ * what the viewer's form gives its map — a part hidden stays hidden, words
+ * for a screen reader alone, its buttons, its sizes — on the map's element
+ * alone, so none of it reaches the page round it. Its colours are Fieldia's
+ * tokens, light and dark by the page's colour scheme, in Fieldia's tokens'
+ * layer: a page's own rule for `.fd-map-embed`, of any weight, sets them.
+ */
+export const EMBED_CSS = `
+@layer fieldia-tokens {
+.fd-map-embed {
+  --fd-text: light-dark(#1f2328, #e8eaed); --fd-muted: light-dark(#59636e, #a3a9b2); --fd-surface: light-dark(#fff, #1f2329); --fd-border: light-dark(#d0d7de, #3a4048);
+  --fd-accent: light-dark(#1365d9, #5aa2ff); --fd-accent-text: light-dark(#fff, #0b1220); --fd-accent-soft: light-dark(#e6f4ff, #1d2c42); --fd-focus: var(--fd-accent);
+  --fd-info: light-dark(#0b5cad, #7db7ff); --fd-success: light-dark(#2e7d32, #6fd08e); --fd-warning: light-dark(#8a5300, #f2b55c); --fd-error: light-dark(#c62828, #ff8a7a);
+  --fd-control-radius: 6px;
+}
+}
+.fd-map-embed { position: relative; color: var(--fd-text); font-size: 14px; line-height: 1.45; }
+.fd-map-embed *, .fd-map-embed ::before, .fd-map-embed ::after { box-sizing: border-box; }
+.fd-map-embed [hidden] { display: none !important; }
+.fd-map-embed .fd-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+.fd-map-embed .fd-button {
+  font: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 4px 14px;
+  border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); background: var(--fd-surface); color: var(--fd-text);
+}
+.fd-map-embed .fd-button:hover { border-color: var(--fd-accent); color: var(--fd-accent); }
+.fd-map-embed .fd-button-primary { background: var(--fd-accent); border-color: var(--fd-accent); color: var(--fd-accent-text); }
+.fd-map-embed .fd-button-primary:hover { color: var(--fd-accent-text); filter: brightness(1.12); }
+.fd-map-embed .fd-button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }
+.fd-map-embed .fd-button[aria-busy="true"] { cursor: progress; opacity: 0.7; }
+`;
+/** A list's map's own base, once per document, after the list map's stylesheet: a page of its own carries it, the viewer never does. */
+export function installEmbedStyles(doc) {
+    installListMapStyles(doc);
+    if (doc.getElementById('fieldia-map-embed-styles'))
+        return;
+    const own = doc.createElement('style');
+    own.id = 'fieldia-map-embed-styles';
+    own.textContent = EMBED_CSS;
+    doc.getElementById('fieldia-list-map-styles')?.after(own);
+}
 /**
  * A form's map, on top of a list map's pins and cards: its label, a route
  * (the part travelled faded), a place whose news is old, the Follow button,
@@ -288,6 +346,12 @@ path.fd-map-fence { stroke: var(--fd-warning); stroke-width: 2.5; stroke-dasharr
   font-size: 11.5px; font-weight: 600; background: var(--fd-surface); color: var(--fd-text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
 }
 .fd-map-face[data-look="photo"] .fd-map-face-stale { top: calc(100% + 26px); }
+/* A place that moves, with pins that crowd it gathered under it: their count, itself among them, at its shoulder. */
+.fd-map-count {
+  position: absolute; top: -8px; right: -10px; z-index: 2; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 999px;
+  display: grid; place-items: center; font: 700 11.5px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; pointer-events: none;
+  background: var(--fd-accent); color: var(--fd-accent-text); border: 2px solid var(--fd-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
 .fd-map-here.fd-map-follow { top: auto; bottom: 28px; }
 .fd-map-locate {
   position: absolute; top: 8px; left: 8px; z-index: 1000; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; cursor: pointer;

package/src/lib/styles.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"styles.mjs","sourceRoot":"","sources":["../../../../../libs/map/src/lib/styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsGtB,CAAC;AAEF,0HAA0H;AAC1H,MAAM,UAAU,gBAAgB,CAAC,GAAa;IAC5C,IAAI,GAAG,CAAC,cAAc,CAAC,oBAAoB,CAAC;QAAE,OAAO;IACrD,MAAM,GAAG,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACvC,GAAG,CAAC,EAAE,GAAG,oBAAoB,CAAC;IAC9B,GAAG,CAAC,WAAW,GAAG,OAAO,CAAC;IAC1B,4EAA4E;IAC5E,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;AACxB,CAAC;AAED,8GAA8G;AAC9G,MAAM,UAAU,oBAAoB,CAAC,GAAa,EAAE,GAAW;IAC7D,IAAI,GAAG,CAAC,cAAc,CAAC,wBAAwB,CAAC;QAAE,OAAO;IACzD,MAAM,OAAO,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC3C,OAAO,CAAC,EAAE,GAAG,wBAAwB,CAAC;IACtC,OAAO,CAAC,WAAW,GAAG,GAAG,CAAC;IAC1B,MAAM,GAAG,GAAG,GAAG,CAAC,cAAc,CAAC,oBAAoB,CAAC,CAAC;IACrD,IAAI,GAAG;QAAE,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;;QACxB,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;AACjC,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4H3B,CAAC;AAEF,yEAAyE;AACzE,MAAM,UAAU,oBAAoB,CAAC,GAAa;IAChD,gBAAgB,CAAC,GAAG,CAAC,CAAC;IACtB,IAAI,GAAG,CAAC,cAAc,CAAC,yBAAyB,CAAC;QAAE,OAAO;IAC1D,MAAM,GAAG,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACvC,GAAG,CAAC,EAAE,GAAG,yBAAyB,CAAC;IACnC,GAAG,CAAC,WAAW,GAAG,YAAY,CAAC;IAC/B,GAAG,CAAC,cAAc,CAAC,oBAAoB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;AACvD,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;CAwB3B,CAAC;AAEF,wEAAwE;AACxE,MAAM,UAAU,oBAAoB,CAAC,GAAa;IAChD,oBAAoB,CAAC,GAAG,CAAC,CAAC;IAC1B,IAAI,GAAG,CAAC,cAAc,CAAC,yBAAyB,CAAC;QAAE,OAAO;IAC1D,MAAM,GAAG,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACvC,GAAG,CAAC,EAAE,GAAG,yBAAyB,CAAC;IACnC,GAAG,CAAC,WAAW,GAAG,YAAY,CAAC;IAC/B,GAAG,CAAC,cAAc,CAAC,yBAAyB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;AAC5D,CAAC"}
+{"version":3,"file":"styles.mjs","sourceRoot":"","sources":["../../../../../libs/map/src/lib/styles.ts"],"names":[],"mappings":"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"}

package/src/lib/tools.d.mts

@@ -1,12 +1,13 @@
 import type * as Leaflet from 'leaflet';
 import type { Locale } from '@fieldia/core';
 import type { MapLabels } from './labels.mjs';
-import type { LeafletModule } from './leaflet.mjs';
-import type { MapBox, MapTool } from './map-core.mjs';
+import { type LeafletModule } from './leaflet.mjs';
+import { type MapBox, type MapTool } from './map-core.mjs';
 import type { MapProvider } from './providers.mjs';
 /**
  * The tools under a map's zoom, those its page asks for: the satellite's
- * images (no button where the provider has none), full screen (filling the
+ * images (no button where the provider has none), the provider's live
+ * traffic over the map (no button where it has none), full screen (filling the
  * window where the browser refuses the screen, as a frame may), and measuring
  * a way (its drawing asked for as the tools come, so a key pressed straight
  * after its press is not lost). Loaded with the first map that has any.
@@ -22,6 +23,8 @@ export declare function wireTools(options: {
     provider: MapProvider;
     /** The satellite's images on or off: the map draws them. */
     satellite(on: boolean): void;
+    /** Traffic on or off: the map says its credits. */
+    traffic(on: boolean): void;
     /** What to undo when the map goes. */
     cleanup(done: () => void): void;
 }): void;

package/src/lib/tools.d.ts

@@ -1,12 +1,13 @@
 import type * as Leaflet from 'leaflet';
 import type { Locale } from '@fieldia/core';
 import type { MapLabels } from './labels';
-import type { LeafletModule } from './leaflet';
-import type { MapBox, MapTool } from './map-core';
+import { type LeafletModule } from './leaflet';
+import { type MapBox, type MapTool } from './map-core';
 import type { MapProvider } from './providers';
 /**
  * The tools under a map's zoom, those its page asks for: the satellite's
- * images (no button where the provider has none), full screen (filling the
+ * images (no button where the provider has none), the provider's live
+ * traffic over the map (no button where it has none), full screen (filling the
  * window where the browser refuses the screen, as a frame may), and measuring
  * a way (its drawing asked for as the tools come, so a key pressed straight
  * after its press is not lost). Loaded with the first map that has any.
@@ -22,6 +23,8 @@ export declare function wireTools(options: {
     provider: MapProvider;
     /** The satellite's images on or off: the map draws them. */
     satellite(on: boolean): void;
+    /** Traffic on or off: the map says its credits. */
+    traffic(on: boolean): void;
     /** What to undo when the map goes. */
     cleanup(done: () => void): void;
 }): void;

package/src/lib/tools.js

@@ -1,9 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.wireTools = wireTools;
+const leaflet_1 = require("./leaflet");
+const map_core_1 = require("./map-core");
 /**
  * The tools under a map's zoom, those its page asks for: the satellite's
- * images (no button where the provider has none), full screen (filling the
+ * images (no button where the provider has none), the provider's live
+ * traffic over the map (no button where it has none), full screen (filling the
  * window where the browser refuses the screen, as a frame may), and measuring
  * a way (its drawing asked for as the tools come, so a key pressed straight
  * after its press is not lost). Loaded with the first map that has any.
@@ -23,6 +26,54 @@ function wireTools(options) {
             options.satellite(on);
         });
     }
+    const traffic = options.provider.traffic;
+    if (tools.has('traffic') && traffic) {
+        const button = box.tool(labels.traffic, '<rect x="7" y="2" width="10" height="20" rx="3"/><circle cx="12" cy="7" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="17" r="1.5"/>');
+        // None from the provider: no such button, as with no traffic at all.
+        button.hidden = true;
+        void traffic('road', locale).then((spec) => (button.hidden = !spec), () => (button.hidden = true));
+        let on = false;
+        let layer = null;
+        let asked = 0;
+        let timer;
+        /**
+         * The traffic for the map images drawn now (Azure's has colours of its own
+         * over the dark map): over them, under the routes and pins; drawn again
+         * as it goes out of date, the new over the old until it has come.
+         */
+        const draw = async () => {
+            const asking = ++asked;
+            clearTimeout(timer);
+            const spec = on ? await traffic((element.dataset['baseMap'] ?? 'road'), locale).catch((error) => ((0, map_core_1.warnOnce)(`The ${options.provider.id} traffic could not be drawn: ${error.message}`), null)) : null;
+            if (asking !== asked)
+                return;
+            const last = layer;
+            layer = spec && (0, leaflet_1.tileLayer)(options.L, spec.fresh ? { ...spec, url: `${spec.url}&t=${Date.now()}` } : spec);
+            if (layer) {
+                layer.options.className = 'fd-map-traffic';
+                layer.setZIndex(2).addTo(map);
+                if (spec?.fresh)
+                    timer = setTimeout(draw, spec.fresh * 1000);
+            }
+            const drop = () => last?.remove();
+            if (layer && last) {
+                layer.once('load', drop);
+                setTimeout(drop, 5000);
+            }
+            else
+                drop();
+        };
+        button.addEventListener('click', () => {
+            on = !on;
+            button.setAttribute('aria-pressed', String(on));
+            options.traffic(on);
+            void draw();
+        });
+        // The map's images change kind (dark for a dark page, the satellite's): the traffic for them.
+        const watch = new MutationObserver(() => on && void draw());
+        watch.observe(element, { attributes: true, attributeFilter: ['data-base-map'] });
+        options.cleanup(() => (watch.disconnect(), clearTimeout(timer)));
+    }
     if (tools.has('fullscreen')) {
         const button = box.tool(labels.fullScreen, '<path d="M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5"/>');
         const mark = (on) => {

package/src/lib/tools.js.map

@@ -1 +1 @@
-{"version":3,"file":"tools.js","sourceRoot":"","sources":["../../../../../libs/map/src/lib/tools.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"tools.js","sourceRoot":"","sources":["../../../../../libs/map/src/lib/tools.ts"],"names":[],"mappings":"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"}