/* ============================================================================
   TerraMap — full map page
   The map is the page. Everything else gets out of its way.
   ========================================================================= */

.tm-map-page {
  block-size: 100%;
  overflow: hidden;          /* the map scrolls, the page does not */
}

html:has(.tm-map-page) { block-size: 100%; }

.tm-map-main {
  position: relative;
  block-size: calc(100dvh - var(--tm-navbar-height));
}

.tm-map--full {
  position: absolute;
  inset: 0;
}

/* Caption sits bottom-left, above the map but clear of MapLibre's own
   attribution in the bottom-right. */
.tm-map-note {
  position: absolute;
  inset-block-end: var(--tm-space-4);
  inset-inline-start: var(--tm-space-4);
  z-index: var(--tm-z-map-ui);
  display: grid;
  gap: var(--tm-space-2);
  max-inline-size: 22rem;
  padding: var(--tm-space-4);
  background: var(--tm-map-control-bg);
  border: 1px solid var(--tm-map-control-border);
  border-radius: var(--tm-radius-md);
  box-shadow: var(--tm-shadow-sm);
  backdrop-filter: blur(6px);
}

.tm-map-note .tm-badge { justify-self: start; }

/* The scale bar would sit underneath the caption, so move it up. */
.tm-map--full .maplibregl-ctrl-bottom-left { inset-block-end: 156px; }

@media (max-width: 767px) {
  .tm-map-note {
    inset-inline: var(--tm-space-3);
    inset-block-end: var(--tm-space-3);
    max-inline-size: none;
  }
  .tm-map--full .maplibregl-ctrl-bottom-left { inset-block-end: 168px; }
}

/* Landscape phones have almost no vertical room; the caption would eat the
   map, so it collapses to the badge alone. */
@media (max-height: 520px) {
  .tm-map-note p { display: none; }
  .tm-map--full .maplibregl-ctrl-bottom-left { inset-block-end: 76px; }
}

/* ============================================================================
   Map tools — place search, the result card, reverse-geocode popup,
   and the API response dialog.

   The panel sits over the map, so every surface here uses the map-control
   tokens rather than the page surface: those exist to stay legible against
   both the Day and the Night cartography.
   ========================================================================= */

.tm-map-tools {
  position: absolute;
  inset-block-start: var(--tm-space-4);
  inset-inline-start: var(--tm-space-4);
  z-index: var(--tm-z-map-ui);
  inline-size: min(24rem, calc(100% - var(--tm-space-8)));
  /* The column must not swallow map drags where it has no content of its
     own; each child turns pointer events back on. */
  pointer-events: none;
}

.tm-map-search { display: grid; gap: var(--tm-space-2); }
.tm-map-search > * { pointer-events: auto; }

.tm-map-search__form {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--tm-map-control-bg);
  border: 1px solid var(--tm-map-control-border);
  border-radius: var(--tm-radius-md);
  box-shadow: var(--tm-shadow-sm);
  backdrop-filter: blur(6px);
}

.tm-map-search__icon {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  color: var(--tm-text-subtle);
  flex: none;
}

.tm-map-search__input {
  flex: 1 1 auto;
  min-inline-size: 0;
  padding-block: var(--tm-space-3);
  padding-inline: 0 var(--tm-space-2);
  font: inherit;
  font-size: var(--tm-text-sm);
  color: var(--tm-text);
  background: none;
  border: 0;
}

.tm-map-search__input::placeholder { color: var(--tm-text-subtle); }
.tm-map-search__input:focus { outline: none; }
/* The ring goes on the whole control, not the bare input, so the focus
   indicator matches the shape the visitor sees. */
.tm-map-search__form:focus-within {
  outline: 2px solid var(--tm-primary);
  outline-offset: 2px;
}

/* Safari draws its own clear affordance on type=search, which would sit
   beside ours. */
.tm-map-search__input::-webkit-search-decoration,
.tm-map-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.tm-map-search__clear {
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  margin-inline-end: var(--tm-space-1);
  color: var(--tm-text-muted);
  background: none;
  border: 0;
  border-radius: var(--tm-radius-sm);
  cursor: pointer;
  flex: none;
}

.tm-map-search__clear:hover { color: var(--tm-text); background: var(--tm-surface-sunken); }

.tm-map-search__results {
  max-block-size: min(22rem, 42dvh);
  margin: 0;
  padding: var(--tm-space-1);
  overflow-y: auto;
  list-style: none;
  background: var(--tm-map-control-bg);
  border: 1px solid var(--tm-map-control-border);
  border-radius: var(--tm-radius-md);
  box-shadow: var(--tm-shadow-md);
  backdrop-filter: blur(6px);
}

.tm-map-search__result {
  display: grid;
  gap: 2px;
  padding: var(--tm-space-2) var(--tm-space-3);
  border-radius: var(--tm-radius-sm);
  cursor: pointer;
}

.tm-map-search__result:hover,
.tm-map-search__result[aria-selected="true"] {
  background: var(--tm-primary-subtle);
}

.tm-map-search__result-name {
  font-size: var(--tm-text-sm);
  font-weight: 500;
  color: var(--tm-text);
}

.tm-map-search__result-meta {
  font-size: var(--tm-text-caption);
  color: var(--tm-text-muted);
}

.tm-map-search__status {
  margin: 0;
  padding: var(--tm-space-2) var(--tm-space-3);
  font-size: var(--tm-text-caption);
  color: var(--tm-text-muted);
  background: var(--tm-map-control-bg);
  border: 1px solid var(--tm-map-control-border);
  border-radius: var(--tm-radius-md);
  backdrop-filter: blur(6px);
}

.tm-map-search__status[data-kind="error"] { color: var(--tm-error); }

/* ── the place card ─────────────────────────────────────────────────────── */

.tm-place-card {
  display: grid;
  gap: var(--tm-space-2);
  padding: var(--tm-space-4);
  background: var(--tm-map-control-bg);
  border: 1px solid var(--tm-map-control-border);
  border-radius: var(--tm-radius-md);
  box-shadow: var(--tm-shadow-md);
  backdrop-filter: blur(6px);
}

.tm-place-card__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--tm-space-2);
}

.tm-place-card__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tm-text);
}

.tm-place-card__subtitle,
.tm-place-card__alt {
  margin: 0;
  font-size: var(--tm-text-caption);
  color: var(--tm-text-muted);
}

.tm-place-card__alt { font-style: italic; }

.tm-place-card__details,
.tm-map-popup__details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px var(--tm-space-3);
  margin: 0;
  font-size: var(--tm-text-caption);
}

.tm-place-card__details dt,
.tm-map-popup__details dt { color: var(--tm-text-subtle); }

.tm-place-card__details dd,
.tm-map-popup__details dd {
  margin: 0;
  color: var(--tm-text);
  /* Coordinates are figures that should line up, and a long street name must
     wrap rather than widen the panel. */
  overflow-wrap: anywhere;
}

.tm-place-card__details dd:nth-last-of-type(-n+2),
.tm-map-popup__details dd:nth-last-of-type(-n+2) {
  font-family: var(--tm-font-mono);
  font-variant-numeric: tabular-nums;
}

.tm-place-card__actions,
.tm-map-popup__actions { margin-block-start: var(--tm-space-1); }

.tm-icon-btn {
  display: grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  color: var(--tm-text-muted);
  background: none;
  border: 0;
  border-radius: var(--tm-radius-sm);
  cursor: pointer;
  flex: none;
}

.tm-icon-btn:hover { color: var(--tm-text); background: var(--tm-surface-sunken); }

/* ── reverse-geocode popup ──────────────────────────────────────────────── */

.tm-map-popup { display: grid; gap: var(--tm-space-2); }

.tm-map-popup__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tm-text);
}

.tm-map-popup__subtitle,
.tm-map-popup__status,
.tm-map-popup__clicked {
  margin: 0;
  font-size: var(--tm-text-caption);
  color: var(--tm-text-muted);
}

.tm-map-popup__status[data-kind="error"] { color: var(--tm-error); }

.tm-map-popup__clicked {
  padding-block-start: var(--tm-space-2);
  border-block-start: 1px solid var(--tm-border);
  font-family: var(--tm-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--tm-text-subtle);
}

/* MapLibre's popup chrome is themed to match the map controls. */
.tm-popup .maplibregl-popup-content {
  padding: var(--tm-space-4);
  background: var(--tm-map-control-bg);
  border: 1px solid var(--tm-map-control-border);
  border-radius: var(--tm-radius-md);
  box-shadow: var(--tm-shadow-md);
  backdrop-filter: blur(6px);
}

.tm-popup .maplibregl-popup-tip { display: none; }
.tm-popup .maplibregl-popup-close-button {
  inset-inline-end: var(--tm-space-1);
  inset-block-start: var(--tm-space-1);
  color: var(--tm-text-muted);
  font-size: 1.125rem;
  border-radius: var(--tm-radius-sm);
}
.tm-popup .maplibregl-popup-close-button:hover {
  color: var(--tm-text);
  background: var(--tm-surface-sunken);
}

/* ── mobile ─────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .tm-map-tools {
    inset-block-start: var(--tm-space-3);
    inset-inline: var(--tm-space-3);
    inline-size: auto;
    /* Leave the top-right zoom and fullscreen controls reachable. */
    padding-inline-end: 2.75rem;
  }

  /* The caption competes with the tools for a small screen, and the tools
     are the interactive half. */
  .tm-map-note { display: none; }

  .tm-map-search__results { max-block-size: 40dvh; }

  /* 44px targets on touch. */
  .tm-map-search__input { padding-block: var(--tm-space-3); min-block-size: 2.75rem; }
  .tm-map-search__result { padding-block: var(--tm-space-3); }
}

/* Landscape phones: the panel would cover the whole map. */
@media (max-height: 520px) {
  .tm-map-search__results { max-block-size: 32dvh; }
  .tm-place-card { max-block-size: 40dvh; overflow-y: auto; }
}