@layer pages {
  .body--map {
    display: flex;
    flex-direction: column;
    block-size: 100dvh;
    margin: 0;
  }

  .map-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-half) var(--space-double);
    padding: var(--space-half) var(--space);
    border-block-end: 1px solid var(--color-grey-light);
    background: var(--color-white);
  }

  .map-header__logo {
    display: block;
    block-size: 2.5rem;
    inline-size: auto;
  }

  .map-header__title {
    margin: 0;
    font-size: var(--text-large);
    color: var(--color-blue);
  }

  .map-header__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-half) var(--space-double);
    margin: 0;
  }

  .map-header__stats dt {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-grey);
  }

  .map-header__stats dd {
    margin: 0;
    font-size: var(--text-small);
    white-space: nowrap;
  }

  .map {
    --map-trace-color: #d9534f;
    --map-article-color: var(--color-blue);

    flex: 1;
    min-block-size: 0;
    background: var(--color-blue-lightest);
  }

  .map-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space);
    color: var(--color-grey);
  }

  .map-empty--maintenance {
    flex-direction: column;
    text-align: center;
  }

  .map-empty--maintenance p { margin: 0; }
  .map-empty__message { font-size: 1.25rem; color: var(--color-blue); }

  /* A white outline keeps the hull readable on the chart as on the satellite. */
  .map-boat svg {
    inline-size: 100%;
    block-size: 100%;
    fill: var(--color-blue-dark);
    filter: drop-shadow(0 0 1px #fff) drop-shadow(0 1px 2px rgb(0 0 0 / 0.4));
  }
}

/* Outside the layers on purpose: leaflet.css is not in a layer, and an
   unlayered rule beats any layered one. */

/* Leaflet's layers icon is a url() of its stylesheet, which Propshaft makes
   absolute (/assets/…), missing the /alibi of the static site: a word instead
   of the picture. */
.map .leaflet-control-layers-toggle,
.map.leaflet-retina .leaflet-control-layers-toggle,
.map.leaflet-touch .leaflet-control-layers-toggle {
  inline-size: auto;
  padding-inline: var(--space-half);
  background-image: none;
  color: var(--color-ink);
  font-size: var(--text-small);
  line-height: 36px;
  text-decoration: none;
}

.map.leaflet-touch .leaflet-control-layers-toggle {
  line-height: 44px;
}

.map .leaflet-control-layers-toggle::before {
  content: "Calques";
}

.map.leaflet-container,
.map .leaflet-popup-content,
.map .leaflet-tooltip {
  font-family: var(--font-sans);
  font-size: var(--text-small);
}