document.addEventListener('DOMContentLoaded', (event) => {
	// Only load the map viewer when it's visible (and javascript is enabled).
  const setMap  = () => { document.querySelector('#map').src = 'map/' }
  const details = document.querySelector('details:last-child')

  // If <details> is not supported (looking at you, Edge), the frame will be
  // visible by default, so just set the target immediately.
  if ('open' in details)
    details.addEventListener('toggle', setMap, { once: true })
  else
    setMap()


	// For custom (dark) CSS themes that don't recognize the <details> background, set it to black.
	const parseColour = (str) => str.match(/([0-9.]+)/g).map(parseFloat)
	const luminance   = ([r,g,b]) => 0.2126*r + 0.7152*g + 0.0722*b
	const textCol     = window.getComputedStyle(document.body).getPropertyValue('color')

	if (luminance(parseColour(textCol)) > 0.5)
		document.body.classList.add('dark')
})