/* Shared Typography - the single source of truth for type in the app.
   Linked from every page, because style.css, spots.css and wind.css are
   three separate worlds and no page loads all of them. */

:root {
  /* The native UI font of whatever OS is rendering us: San Francisco on
     Apple, Segoe on Windows, Roboto on Android. Arial only as a backstop. */
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
}

body {
  font-family: var(--font-ui);
}

/* Form controls do not inherit type from their parent - left alone they fall
   back to the browser's own font (Chrome uses Arial 13.3px for buttons), which
   is why the search field never matched the text beside it. Only the family is
   inherited here; sizes stay wherever each control already set them. */
input,
button,
select,
textarea {
  font-family: inherit;
}

/* Leaflet's own stylesheet puts "Helvetica Neue" on .leaflet-container, which
   left every map label, cluster bubble and attribution on a different font from
   the rest of the app. It loads from a CDN after our CSS, so plain
   .leaflet-container would lose on order - the body prefix outranks it. */
body .leaflet-container {
  font-family: var(--font-ui);
}

/* MarkerCluster.Default.css sets a `font:` shorthand straight onto the cluster
   bubble, and a rule that matches an element always beats a value it would
   otherwise inherit - so the container rule above cannot reach this one. */
body .marker-cluster div {
  font-family: var(--font-ui);
}