/* mapindex world styles, for /world only (world/page.html), loaded after site.css
   and before MapLibre's own stylesheet. */

/* The world (/world), laid out as a map app: the globe fills the whole window and the
   search bar floats at its top left, the logo inside it, the theme switch at the top
   right. On wider screens a list opens as a column down the window's left with the bar
   at its head, a map's card beside it, or over it where the window is narrow; the
   globe's buttons sit at the bottom right. On phones the panel is a bottom sheet and
   the buttons stand at the right below the bar. The page's own padding and the footer
   give way to the map. */
body:has(.globe) {
  /* The window's edge to the panels, their edge to the bar, the bar's edge to the
     window; the bar's width and height, a panel's width, the room between them. */
  --globe-edge: var(--space-2);
  --globe-margin: var(--space-2);
  --globe-inset: calc(var(--globe-edge) + var(--globe-margin));
  --globe-column: 27rem;
  --globe-bar-height: 6rem;
  --globe-panel-width: calc(var(--globe-column) + 2 * var(--globe-margin));
  --globe-gap: var(--space-2);
  /* The filters open below the bar, measured by panel.js. */
  --globe-head: calc(var(--globe-margin) + var(--globe-bar-height) + var(--globe-filters, 0px) + var(--globe-margin));
  --globe-below-bar: calc(var(--globe-edge) + var(--globe-head));
  height: 100dvh;
}

body:has(.globe) .page {
  display: flex;
  min-height: 0;
  max-width: none;
  padding: 0;
}

body:has(.globe) .site-footer {
  display: none;
}

.globe {
  position: relative;
  flex: 1;
  /* The theme's canvas while the map loads; space, night in both themes, is the sky
     world.js draws. */
  background: var(--color-canvas);
}

/* No masthead: its search and theme switch float over the globe, which takes the whole
   window. Only they take clicks; the rest of the globe stays the map's. */
body:has(.globe) .masthead {
  position: fixed;
  inset: 0 0 auto;
  background: none;
  box-shadow: none;
  pointer-events: none;
}

body:has(.globe) .masthead__inner {
  display: block;
  max-width: none;
  min-height: 0;
  padding: 0;
}

body:has(.globe) .masthead .brand {
  display: none;
}

body:has(.globe) .masthead__search {
  position: absolute;
  top: var(--globe-inset);
  left: var(--globe-inset);
  width: min(var(--globe-column), 100% - 2 * var(--globe-inset));
  margin: 0;
  pointer-events: auto;
}

body:has(.globe) .masthead__nav {
  position: absolute;
  top: var(--globe-inset);
  right: var(--globe-inset);
  pointer-events: auto;
}

body:has(.globe) .masthead__nav .button {
  background: var(--color-card);
  box-shadow: var(--shadow-float);
}

body:has(.globe) .masthead__nav .button:hover {
  background: var(--color-raised);
}

/* The bar floats on the globe, or lies flat in the panel at whose head it stands; its
   filters unfold as a tray hanging from it, pushing the panels' content down. */
body:has(.globe) .search-shell {
  position: relative;
  box-shadow: var(--shadow-float);
}

body:has(.globe) .search-shell:has(.filters__body:not([hidden])) {
  border-radius: 1.375rem 1.375rem 0 0;
}

/* What over Where, the logo before them, the search beside What and the filters beside
   Where. Over the rule for a chosen point's radius, which widens Where in one row. */
body:has(.globe) .masthead__search .search-bar {
  z-index: 1;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-1);
  min-height: var(--globe-bar-height);
  padding: 0.375rem;
  border-radius: inherit;
  background: inherit;
}

body:has(.globe) .search-bar__segment {
  min-height: 2.5rem;
}

body:has(.globe) .search-bar__what {
  grid-area: 1 / 2;
}

body:has(.globe) .search-bar__where {
  grid-area: 2 / 2;
}

body:has(.globe) .search-bar__where::before {
  display: none;
}

body:has(.globe) .search-bar__submit {
  grid-area: 1 / 3;
}

body:has(.globe) .search-bar .filters__toggle {
  grid-area: 2 / 3;
  margin-inline: 0.125rem;
}

body:has(.globe) .filters__body {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-radius: 0 0 1.375rem 1.375rem;
  background: var(--color-field);
  box-shadow: var(--shadow-float);
}

/* The logo leads home from inside the bar. */
.search-bar__home {
  grid-area: 1 / 1 / 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
}

.search-bar__home:hover {
  background: color-mix(in srgb, var(--color-raised) 60%, transparent);
}

.search-bar__home svg {
  width: 1.625rem;
  height: 1.625rem;
}

/* Empties the bar and ends the search. */
.search-bar__clear {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
}

.search-bar__clear[hidden] {
  display: none;
}

.search-bar__clear:hover,
.search-bar__clear:focus-visible {
  background: var(--color-hover);
  color: var(--color-text);
}

.search-bar__clear .icon {
  width: 1rem;
  height: 1rem;
}

@media (min-width: 48rem) {
  /* The bar lies flat in the panel at whose head it stands. */
  body:has(.globe:not(.is-folded) .globe-panel:not([hidden])) .search-shell,
  body:has(.globe:not(.is-folded, .is-card-folded) .globe-card:not([hidden])) .search-shell {
    box-shadow: none;
  }

  /* The globe's buttons at the bottom right, above the attribution. */
  .globe .maplibregl-ctrl-top-left {
    top: auto;
    right: 0;
    bottom: 2.125rem;
    left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .globe .maplibregl-ctrl-top-left .maplibregl-ctrl {
    float: none;
    margin: 0 10px 10px 0;
  }
}

@media (max-width: 47.99rem) {
  /* The theme switch and the globe's buttons stand at the right below the bar; the
     switch gives way to a sheet raised up to the bar. */
  body:has(.globe) .masthead__nav {
    top: calc(var(--globe-below-bar) + var(--space-1));
  }

  body:has(.globe-panel.is-whole) .masthead__nav {
    display: none;
  }

  .globe .maplibregl-ctrl-top-left {
    top: calc(var(--globe-below-bar) + var(--space-12) + var(--space-2));
    right: 0;
    left: auto;
  }

  .globe .maplibregl-ctrl-top-left .maplibregl-ctrl {
    float: none;
    margin: 0 var(--globe-inset) var(--space-2) 0;
  }

  /* The attribution rides on the sheet. */
  .globe .maplibregl-ctrl-bottom-right {
    bottom: var(--sheet-height, 0px);
    transition: bottom 0.25s var(--ease);
  }
}

/* Space below the map: stars and the globe's glow (world.js draws it). */
/* The point the panel's place links name: a ring in the accent colour around it. */
.globe__spot {
  width: 1.375rem;
  height: 1.375rem;
  border: 3px solid var(--color-accent);
  border-radius: 50%;
  box-shadow:
    0 0 0 2px #ffffff,
    inset 0 0 0 2px #ffffff,
    0 1px 6px rgb(0 0 0 / 0.45);
  pointer-events: none;
}

.globe__sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Sized, not positioned: MapLibre makes its container position: relative. */
.globe__map {
  width: 100%;
  height: 100%;
}

/* The compass's group shows only once the map is turned or tilted. Its needle points
   north in red. */
.globe .maplibregl-ctrl-group:has(.maplibregl-ctrl-compass.is-north) {
  display: none;
}

.globe .maplibregl-ctrl-compass .maplibregl-ctrl-icon {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 29'%3E%3Cpath fill='%23e53935' d='m10.5 14.5 4-9 4 9z'/%3E%3Cpath fill='%23b0b0b0' d='m10.5 14.5 4 9 4-9z'/%3E%3C/svg%3E");
}

/* The loader covers the globe until the world far out is loaded (world.js), the bar
   below the logo filling as it does. Without JavaScript nothing loads. */
.globe__loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  background: var(--color-canvas);
  transition: opacity 300ms ease-out;
}

.globe__loading.is-done {
  opacity: 0;
  pointer-events: none;
}

.globe__loading .mapindex-loader {
  width: 4rem;
  height: 4rem;
}

.globe__loading .mapindex-loader path {
  fill: var(--color-logo);
}

/* The browser cannot draw the globe: the loader says why instead of loading on. */
.globe__loading.is-failed :is(.mapindex-loader, .globe__progress) {
  display: none;
}

.globe__failed {
  max-width: 32rem;
  margin: 0;
  padding: 0 var(--space-4);
  text-align: center;
}

.globe__progress {
  width: 8rem;
  height: 0.25rem;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
}

.globe__progress > span {
  display: block;
  height: 100%;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 150ms linear;
}

@media (scripting: none) {
  .globe__loading {
    display: none;
  }
}

/* The search and the panels come once the loader is done. A shared link's panel is
   filled meanwhile, and keeps its size for the view to frame around. */
@media (scripting: enabled) {
  body:has(.globe__loading:not(.is-done)) :is(.masthead__search, .globe-panel, .globe-card, .globe-fold) {
    visibility: hidden;
    opacity: 0;
  }

  body:has(.globe) .masthead__search {
    transition: opacity 300ms ease-out;
  }
}

@media (prefers-reduced-motion: reduce) {
  .globe__loading,
  .globe__progress > span {
    transition: none;
  }
}

.globe__noscript {
  position: absolute;
  top: calc(var(--globe-below-bar) + var(--space-2));
  left: 50%;
  transform: translateX(-50%);
}

/* The panel: a bar that stays (back to the maps at a place, close) over content that
   scrolls on its own. On wider screens a column down the window's left, the search bar
   at its head; on phones a bottom sheet whose bar is the handle, with three stops
   (world.js sets --sheet-height). */
.globe-panel {
  position: absolute;
  z-index: 2;
  top: var(--globe-edge);
  bottom: var(--globe-edge);
  left: var(--globe-edge);
  display: flex;
  flex-direction: column;
  width: var(--globe-panel-width);
  padding-top: var(--globe-head);
  overflow: hidden;
  border-radius: var(--radius-l);
  background: var(--color-card);
  box-shadow: var(--shadow-float);
}

.globe.is-folded :is(.globe-panel, .globe-card),
.globe.is-card-folded .globe-card {
  display: none;
}

.globe-panel[hidden] {
  display: none;
}

.globe-panel__bar {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.5rem;
  padding: 0 var(--space-2) 0 var(--space-2);
}

.globe-panel__grip {
  display: none;
}

.globe-panel__back {
  min-width: 0;
}

.globe-panel__close {
  margin-left: auto;
}

/* The logo's loader while the panel's content loads (world.js); it fades in late, so a
   quick answer never shows it. */
.globe-panel__loading {
  display: flex;
  justify-content: center;
  padding: var(--space-8) 0;
  animation: globe-panel-loading 200ms ease-out 150ms both;
}

.globe-panel__loading .mapindex-loader {
  width: 3rem;
  height: 3rem;
}

.globe-panel__loading .mapindex-loader path {
  fill: var(--color-logo);
}

@keyframes globe-panel-loading {
  from {
    opacity: 0;
  }
}

.globe-panel__content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-2) var(--space-2) var(--space-4);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--color-text) 22%, transparent) transparent;
}

/* A map's panel: the preview, then title, actions and all its page says, each with the
   same side room; on phones the preview follows the actions. In the card the preview
   reaches the edges. */
.globe-panel__map[data-map] {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.globe-panel__map[data-map] > * {
  margin-block: 0;
  margin-inline: var(--space-2);
}

.globe-card .globe-panel__map[data-map] > .globe-panel__preview {
  margin-inline: calc(-1 * var(--space-2));
}

.globe-panel__preview {
  flex: none;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--color-raised);
}

.globe-panel__preview img,
.globe-panel__preview .preview-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.globe-panel__title {
  margin: 0;
  font-size: var(--text-22);
  overflow-wrap: anywhere;
}

.globe-panel__object-name {
  font-weight: 600;
}

/* An object search's list: an object, its passage, its map. */
.globe-panel__object {
  grid-template-columns: 1fr;
}

.globe-panel__passage {
  color: var(--color-text-muted);
  font-size: var(--text-14);
}

.globe-panel__object mark {
  border-radius: 0.2em;
  background: var(--color-accent-soft);
  color: var(--color-accent-soft-ink);
}

.globe-panel__object-map {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}

.globe-panel__object-map span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.globe-panel__more-objects {
  margin: 0 0 var(--space-2) var(--space-2);
  font-size: var(--text-14);
}

/* Maps | Objects of a search for both, as the filters' choice of what to search. */
.globe-panel__tabs {
  display: inline-flex;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
  padding: 0.1875rem;
  border-radius: var(--radius-pill);
  background: var(--color-raised);
}

.globe-panel__tab {
  min-height: 2rem;
  padding: 0 0.875rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-14);
  font-weight: 500;
  cursor: pointer;
}

.globe-panel__tab:hover {
  background: var(--color-hover);
}

.globe-panel__tab[aria-selected="true"] {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.globe-panel__tab-count {
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}

/* What a panel loads once scrolled to; a thin line so that it can be seen at all. */
.globe-panel__later {
  min-height: 1px;
}

.globe-panel__map .comments {
  padding: 0;
}

/* The map's actions: on wider screens a round button over its label, each the same
   width; on phones pills in a row that scrolls sideways. */
.globe-panel__actions {
  display: flex;
  gap: var(--space-1);
}

.split-button {
  position: relative;
  display: contents;
}

.globe-action {
  display: inline-flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-12);
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.globe-action[hidden] {
  display: none;
}

.globe-action .icon {
  box-sizing: content-box;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent-soft-ink);
  transition: background 0.15s var(--ease);
}

.globe-action:hover .icon {
  background: color-mix(in srgb, var(--color-accent-soft) 80%, var(--color-accent));
}

.globe-action--primary .icon {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.globe-action--primary:hover .icon {
  background: var(--color-accent-hover);
}

/* The menu floats in the top layer, over the map, so it never stretches the panel;
   placed under or above its button by world.js. */
.split-button__menu {
  position: fixed;
  inset: auto;
  min-width: 12rem;
  max-height: calc(100dvh - 8px);
  overflow-y: auto;
  margin: 0;
  padding: var(--space-1);
  border: 0;
  border-radius: var(--radius-m);
  background: var(--color-card);
  color: var(--color-text);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-text) 12%, transparent),
    var(--shadow-float);
  list-style: none;
}

.split-button__menu:popover-open {
  display: grid;
  gap: var(--space-1);
}

.split-button__menu .choice {
  color: var(--color-text);
  text-decoration: none;
}

.split-button__menu button.choice {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  text-align: start;
}

.split-button__menu button.choice:hover {
  background: var(--color-raised);
}

/* An app with nothing to show here, such as Street View far from any road. */
.split-button__menu .choice[aria-disabled="true"] {
  color: var(--color-text-subtle);
  cursor: default;
}

.split-button__menu .choice[aria-disabled="true"]:hover {
  background: none;
}

/* A line over the menu's last item, which is no app. */
.split-button__divider {
  margin-top: var(--space-1);
  padding-top: var(--space-1);
  border-top: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
}

.split-button__menu .choice[aria-current] {
  background: var(--color-accent-soft);
  color: var(--color-accent-soft-ink);
}

/* The menu of a point right-clicked or long-pressed on the globe, where it was. */
.globe__menu .icon {
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--color-text-muted);
}

.globe-panel__heading {
  margin: 0 0 var(--space-2);
  font-size: var(--text-16);
}

.globe-panel__list {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A row of a list: its text, the map's preview at the end; a fill only under the
   pointer or when chosen. */
.globe-panel__choice {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3);
  border: 0;
  border-radius: var(--radius-m);
  background: none;
  color: var(--color-text);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.globe-panel__choice:hover {
  background: var(--color-raised);
}

.globe-panel__hit {
  align-items: flex-start;
}

.globe-panel__hit img,
.globe-panel__hit .preview-placeholder {
  flex: none;
  width: 6.5rem;
  height: 4.875rem;
  border-radius: var(--radius-m);
  object-fit: cover;
}

.globe-panel__hit-text {
  display: grid;
  flex: 1;
  align-content: start;
  gap: var(--space-1);
  min-width: 0;
  overflow-wrap: anywhere;
}

.globe-panel__hit-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-weight: 600;
}

.globe-panel__hit-meta {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}

.globe-panel__hit-meta svg,
.globe-panel__hit-meta img {
  flex: none;
  width: 1rem;
  height: 1rem;
}

.globe-panel__count {
  margin: 0 var(--space-3) var(--space-2);
}

.globe-panel__more {
  display: flex;
  justify-content: center;
  padding-top: var(--space-2);
}

.globe-panel__note,
.globe-panel__empty {
  margin: 0;
  color: var(--color-text-subtle);
  font-size: var(--text-14);
}

/* The globe page never scrolls as a whole: a swipe in the sheet scrolls the sheet. */
body:has(.globe) {
  overflow: hidden;
}

/* A map's card beside the list on wider screens (card.js), as tall as it: the map's
   panel, its preview under a close button; its content scrolls on its own. Without a
   list, or where the window has no room for both, it takes the list's place below the
   bar. Phones show a map in the sheet instead. */
.globe-card {
  --globe-card-head: 0px;
  position: absolute;
  z-index: 2;
  top: var(--globe-edge);
  bottom: var(--globe-edge);
  left: calc(var(--globe-edge) + var(--globe-panel-width) + var(--globe-gap));
  display: flex;
  flex-direction: column;
  width: 25rem;
  padding-top: var(--globe-card-head);
  overflow: hidden;
  border-radius: var(--radius-l);
  background: var(--color-card);
  box-shadow: var(--shadow-float);
}

.globe-panel[hidden] ~ .globe-card {
  --globe-card-head: var(--globe-head);
  left: var(--globe-edge);
  width: var(--globe-panel-width);
}

@media (max-width: 64.99rem) {
  .globe-card {
    --globe-card-head: var(--globe-head);
    z-index: 3;
    left: var(--globe-edge);
    width: var(--globe-panel-width);
  }
}

.globe-card[hidden] {
  display: none;
}

.globe-card__content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--space-2) var(--space-4);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--color-text) 22%, transparent) transparent;
}

/* A thin scrollbar in the panel's own colours, not the system's grey bar, ending short
   of the rounded corners. The standard properties set no margin and, set, would switch
   the pseudo-elements off, so where these exist they give way; Firefox keeps them. */
@media (min-width: 48rem) {
  @supports selector(::-webkit-scrollbar) {
    :is(.globe-panel__content, .globe-card__content) {
      scrollbar-width: auto;
      scrollbar-color: auto;
    }

    :is(.globe-panel__content, .globe-card__content)::-webkit-scrollbar {
      width: 0.5rem;
    }

    :is(.globe-panel__content, .globe-card__content)::-webkit-scrollbar-track {
      margin-block: var(--radius-l);
      background: transparent;
    }

    :is(.globe-panel__content, .globe-card__content)::-webkit-scrollbar-thumb {
      border: 0.125rem solid transparent;
      border-radius: var(--radius-pill);
      background: color-mix(in srgb, var(--color-text) 22%, transparent) padding-box;
    }
  }
}

/* The tab on the panels' outer edge, folding them away; at the window's edge while
   they are. */
.globe-fold {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: calc(var(--globe-edge) + var(--globe-panel-width));
  display: none;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 3rem;
  padding: 0;
  border: 0;
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  background: var(--color-card);
  color: var(--color-text-muted);
  box-shadow: var(--shadow-card);
  transform: translateY(-50%);
  cursor: pointer;
}

.globe-fold:hover {
  background: var(--color-raised);
  color: var(--color-text);
}

@media (min-width: 48rem) {
  .globe:has(.globe-panel:not([hidden]), .globe-card:not([hidden])) .globe-fold {
    display: flex;
  }
}

@media (min-width: 65rem) {
  .globe:not(.is-folded, .is-card-folded) > .globe-panel:not([hidden]) ~ .globe-card:not([hidden]) ~ .globe-fold {
    left: calc(var(--globe-edge) + var(--globe-panel-width) + var(--globe-gap) + 25rem);
  }
}

.globe.is-folded .globe-fold {
  left: 0;
}

.globe.is-folded .globe-fold .icon {
  transform: rotate(180deg);
}

/* The row whose map is pinned. */
.globe-panel__choice[aria-current="true"] {
  background: var(--color-accent-soft);
  color: var(--color-accent-soft-ink);
}

/* An object on the globe (label.js): the pointer's small label beside its point, which
   never takes the pointer, or the chosen object's popup over it. Hidden while the point
   is behind the globe. */
.globe-label {
  display: grid;
  gap: 0.125rem;
  max-width: 16rem;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-m);
  background: var(--color-card);
  color: var(--color-text);
  box-shadow: var(--shadow-float);
  font-family: var(--font-sans);
  font-size: var(--text-13);
  line-height: 1.4;
  pointer-events: none;
  overflow-wrap: anywhere;
}

.globe-label.maplibregl-marker-covered {
  visibility: hidden;
}

.globe-label p {
  margin: 0;
}

.globe-label__name {
  font-weight: 600;
}

@media (max-width: 47.99rem) {
  .globe-card {
    display: none;
  }

  /* Fixed to the bottom of what the screen shows, whatever the page's height says
     there; world.js sets the height from the visible room. */
  .globe-panel {
    position: fixed;
    z-index: var(--z-sheet);
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--sheet-height, auto);
    padding-top: 0;
    border-radius: var(--radius-l) var(--radius-l) 0 0;
    transition: height 0.25s var(--ease);
  }

  .globe-panel__content {
    padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
  }

  .globe-panel.is-dragging {
    transition: none;
  }

  .globe-panel__bar {
    padding-top: var(--space-4);
    cursor: grab;
    touch-action: none;
  }

  .globe-panel__grip {
    display: block;
    position: absolute;
    top: var(--space-2);
    left: 50%;
    width: 2.5rem;
    height: 5px;
    border-radius: var(--radius-pill);
    background: var(--color-text-subtle);
    opacity: 0.4;
    transform: translateX(-50%);
  }

  /* Title and actions first, so a sheet at its lowest stop shows them. */
  .globe-panel__map[data-map] > * {
    order: 1;
  }

  .globe-panel__map[data-map] > :is(.globe-panel__heading-group, .globe-panel__actions) {
    order: 0;
  }

  .globe-panel__preview {
    border-radius: var(--radius-m);
  }

  .globe-panel__title {
    font-size: var(--text-20);
  }

  .globe-panel__map[data-map] > .globe-panel__actions {
    gap: var(--space-2);
    margin-inline: 0;
    padding-inline: var(--space-2);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .globe-action {
    flex: none;
    flex-direction: row;
    gap: var(--space-2);
    min-height: 2.75rem;
    padding: 0 var(--space-4);
    border-radius: var(--radius-pill);
    background: var(--color-accent-soft);
    color: var(--color-accent-soft-ink);
    font-size: var(--text-14);
    white-space: nowrap;
  }

  .globe-action .icon,
  .globe-action--primary .icon {
    width: 1.125rem;
    height: 1.125rem;
    padding: 0;
    background: none;
    color: inherit;
  }

  .globe-action--primary {
    background: var(--color-accent);
    color: var(--color-on-accent);
  }
}

/* The popup, a tip pointing at its point: the name stays while a long description
   scrolls, faded where it goes on. On phones it fits between the bar and the sheet. */
.globe-label--open {
  gap: var(--space-1);
  width: max-content;
  max-width: min(22rem, 100vw - 2rem);
  padding: var(--space-3) var(--space-1) var(--space-3) var(--space-3);
  font-size: var(--text-14);
  line-height: 1.5;
  pointer-events: auto;
  cursor: auto;
  user-select: text;
}

.globe-label--open::after {
  content: "";
  position: absolute;
  bottom: -0.3125rem;
  left: 50%;
  width: 0.75rem;
  height: 0.75rem;
  background: inherit;
  transform: translateX(-50%) rotate(45deg);
  border-bottom-right-radius: 0.1875rem;
}

.globe-label--open .globe-label__name {
  padding-right: var(--space-2);
  font-size: var(--text-15);
}

.globe-label__text {
  max-height: min(18rem, 34dvh);
  padding-right: var(--space-2);
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  color: var(--color-text-muted);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--color-text) 22%, transparent) transparent;
}

.globe-label__text.has-more {
  mask-image: linear-gradient(#000 calc(100% - 2.5rem), transparent);
}

@media (max-width: 47.99rem) {
  .globe-label__text {
    max-height: 20dvh;
  }
}

.globe-panel__bar > .globe-panel__title {
  min-width: 0;
  margin: 0 0 0 var(--space-2);
  font-size: var(--text-18);
}

/* The chevron beside the label of what unfolds a menu. */
.globe-action__label {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
}

.globe-action .globe-action__label .icon {
  width: 0.75rem;
  height: 0.75rem;
  padding: 0;
  background: none;
  color: inherit;
}

/* Wider screens close nothing by a button (panel.js): the bar holds a way back, if any. */
@media (min-width: 48rem) {
  .globe-panel__bar {
    min-height: 0;
  }

  .globe-panel__close {
    display: none;
  }
}