/* UX-10 Places / map V3. Scoped so no detail, route, Home, or account surface moves. */
[data-places-root] {
  --places-target: 2.75rem;
}

[data-places-root] .places-sample-note,
[data-places-root] .places-result-status {
  margin-inline: var(--space-gutter);
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

[data-places-root] .places-sample-note {
  margin-block: 0 var(--space-xs);
  padding: 0;
}

[data-places-root] .page-head--places {
  min-height: 5rem;
  padding-block: var(--space-xs);
}

[data-places-root] .page-head__photo {
  width: min(6rem, 26vw);
  height: min(4.5rem, 19.5vw);
}

[data-places-root] .search-zone,
[data-places-root] .filter-row {
  padding-block: var(--space-xs);
  margin-block: 0;
}

[data-places-root] .screen-stage > :last-child {
  padding-block-end: var(--space-sm);
}

[data-places-root] .search-row {
  grid-template-columns: minmax(0, 1fr);
}

[data-places-root] .search-zone,
[data-places-root] .search-field,
[data-places-root] .search-input {
  min-inline-size: 0;
  inline-size: 100%;
}

[data-places-root] .search-pill,
[data-places-root] .search-input,
[data-places-root] [data-search-clear],
[data-places-root] .filter-chip,
[data-places-root] .view-button,
[data-places-root] [data-map-retry],
[data-places-root] .map-place-card__close,
[data-places-root] .map-place-card__more,
[data-places-root] .map-place-card__nav {
  min-height: var(--places-target);
}

[data-places-root] .save-heart {
  inline-size: var(--places-target);
  block-size: var(--places-target);
}

[data-places-root] .filter-row {
  max-inline-size: 100%;
  scroll-padding-inline: var(--space-gutter);
  overscroll-behavior-inline: contain;
}

[data-places-root] .view-switch--compact {
  inline-size: calc(100% - (2 * var(--space-gutter)));
  margin-inline: var(--space-gutter);
  padding-block: 0.2rem;
}

[data-places-root] .view-switch--compact .view-button {
  min-block-size: var(--places-target);
  flex: 1 1 50%;
  font-size: var(--text-base);
}

[data-places-root] .places-result-status {
  min-block-size: 1.5em;
  padding-block: var(--space-xs) 0;
  font-weight: 600;
}

[data-places-root] .places-map-error {
  display: grid;
  margin-inline: var(--space-gutter);
  margin-block: 0 var(--space-sm);
  padding: var(--space-md);
  gap: var(--space-xs);
  justify-items: start;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

[data-places-root] .places-map-error[hidden] {
  display: none;
}

[data-places-root] .places-map-error strong {
  font-family: var(--font-display);
  font-size: var(--text-base);
}

[data-places-root] .places-map-error p {
  color: var(--color-ink-muted);
  line-height: var(--lh-body);
}

[data-places-root] .map-panel {
  padding-block-start: var(--space-sm);
}

[data-places-root] .map-shell {
  min-block-size: 22rem;
  overflow: hidden;
  border-radius: var(--radius-tile);
  background: color-mix(in srgb, var(--color-tint-chill) 42%, var(--color-surface));
  box-shadow: var(--shadow-control);
}

[data-places-root] .places-map-loading {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  gap: var(--space-sm);
  place-content: center;
  justify-items: center;
  padding: var(--space-md);
  background: color-mix(in srgb, var(--color-tint-chill) 42%, var(--color-surface));
  color: var(--color-ink);
  font-size: var(--text-base);
  font-weight: 600;
  text-align: center;
}

[data-places-root] .places-map-loading__mark {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border: 3px solid var(--color-primary);
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.45rem var(--color-surface);
}

[data-places-root] .map-shell[data-map-state="ready"] .places-map-loading,
[data-places-root] .map-shell[data-map-state="live"] .places-map-loading,
[data-places-root] .map-shell[data-map-state="error"] .places-map-loading {
  display: none;
}

[data-places-root] .map-shell:not([data-map-state="ready"]):not([data-map-state="live"]) .map-full {
  visibility: hidden;
}

[data-places-root] .map-place-card {
  grid-template-columns: 3.5rem minmax(0, 1fr) var(--places-target);
  grid-template-areas: "photo body close" "actions actions actions";
  padding: var(--space-sm);
  gap: var(--space-xs);
  max-block-size: calc(100% - (2 * var(--space-xs)));
  overflow: auto;
}

[data-places-root] .map-place-card__photo {
  grid-area: photo;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-control);
  object-fit: cover;
}

[data-places-root] .map-place-card__photo[hidden] {
  display: none;
}

[data-places-root] .map-place-card:has(.map-place-card__photo[hidden]) {
  grid-template-columns: minmax(0, 1fr) var(--places-target);
  grid-template-areas: "body close" "actions actions";
}

[data-places-root] .map-place-card__body {
  grid-area: body;
  min-width: 0;
}

[data-places-root] .map-place-card__name {
  padding: 0;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

[data-places-root] .map-place-card__close {
  position: static;
  grid-area: close;
  width: var(--places-target);
  height: var(--places-target);
}

[data-places-root] .map-place-card__actions {
  grid-area: actions;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
}

[data-places-root] .map-place-card__meta {
  margin-block-start: var(--space-3xs);
  padding: 0;
  font-size: var(--text-sm);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

[data-places-root] .map-place-card__more,
[data-places-root] .map-place-card__nav {
  display: inline-flex;
  inline-size: 100%;
  padding-inline: var(--space-sm);
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  margin: 0;
}

[data-places-root] .map-place-card__more {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

[data-places-root] .map-place-card__nav .icon {
  flex: 0 0 1rem;
  width: 1rem;
  height: 1rem;
  transform: rotate(-45deg);
}

[data-places-root] .map-place-card__nav[aria-disabled="true"] .icon {
  display: none;
}

[data-places-root] .map-place-card__nav[aria-disabled="true"] {
  border: var(--rule-hair) solid var(--color-border);
  background: var(--color-surface-sunken);
  color: var(--color-ink-muted);
  cursor: not-allowed;
}

/* Place names belong to their canonical HTML pins, not a basemap glyph service. */
[data-places-root] .map-pin__disc {
  width: 2rem;
  height: 2rem;
}

[data-places-root] .map-pin__disc .icon {
  width: 1.125rem;
  height: 1.125rem;
}

[data-places-root] .map-pin.is-active,
[data-places-root] .map-pin:focus-visible {
  z-index: 1;
}

[data-places-root] .map-pin.is-active .map-pin__disc {
  background: var(--color-primary);
  border-color: var(--color-surface);
  box-shadow: 0 0 0 2px var(--color-primary), var(--shadow-control);
  transform: scale(1.12);
}

[data-places-root] .map-pin.is-active .map-pin__disc .icon {
  color: var(--color-on-primary);
}

[data-places-root] .map-pin__label {
  position: absolute;
  left: calc(50% + var(--label-x, 0px));
  top: calc(50% + var(--label-y, 0px));
  display: flex;
  align-items: center;
  width: max-content;
  max-width: min(11rem, 55vw);
  min-height: 2rem;
  padding: var(--space-3xs) var(--space-xs);
  border: var(--rule-hair) solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: var(--shadow-control);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.4;
  text-align: start;
  white-space: normal;
  overflow-wrap: anywhere;
  visibility: hidden;
}

[data-places-root] .map-pin__label[data-visible="true"] {
  visibility: visible;
}

[data-places-root] .map-pin.is-active .map-pin__label {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

html[data-input="key"] [data-places-root] .map-pin:focus-visible .map-pin__label {
  outline: 2px solid var(--color-focus);
}

[data-places-root] .place-sample-distance {
  color: var(--color-ink-muted);
  white-space: normal;
}

html[data-input="key"] [data-places-root] .places-map-error:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}

html[data-easy="on"] [data-places-root] {
  --places-target: 3.5rem;
}

html[data-easy="on"] [data-places-root] .map-place-card {
  grid-template-areas: "photo body close" "meta meta meta" "actions actions actions";
}

html[data-easy="on"] [data-places-root] .map-place-card:has(.map-place-card__photo[hidden]) {
  grid-template-areas: "body close" "meta meta" "actions actions";
}

html[data-easy="on"] [data-places-root] .map-place-card__body {
  display: contents;
}

html[data-easy="on"] [data-places-root] .map-place-card__name {
  grid-area: body;
  align-self: center;
}

html[data-easy="on"] [data-places-root] .map-place-card__meta {
  grid-area: meta;
  margin-block-start: 0;
}

html[data-easy="on"] [data-places-root] .places-sample-note,
html[data-easy="on"] [data-places-root] .places-result-status,
html[data-easy="on"] [data-places-root] .places-map-error,
html[data-easy="on"] [data-places-root] .map-note,
html[data-easy="on"] [data-places-root] .map-place-card__meta {
  font-size: var(--text-base);
}

@media (max-width: 22rem) {
  [data-places-root] .map-panel {
    padding-inline: var(--space-xs);
  }

  [data-places-root] .map-place-card {
    inset-inline: var(--space-3xs);
    inset-block-end: var(--space-3xs);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-places-root] .map-pin__disc {
    transition: none;
  }
}

/* Discovery controls stay visible and operable with long translations and large text. */
.places-discovery-origin:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
  margin: 0;
  padding: var(--space-xs) var(--space-gutter);
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
}
.places-discovery-origin [data-discovery-locate] { min-height: 2.75rem; white-space: normal; }
[data-places-root] [data-discovery-order] { min-height: 2.75rem; }