.sharing-panel,
.public-places {
  margin-bottom: 2rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.82);
}

.sharing-panel h2,
.public-places > h2 {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.04em;
}

.sharing-panel__visibility {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr);
  align-items: start;
  gap: clamp(2rem, 6vw, 5rem);
}

.sharing-panel__copy > p {
  max-width: 38rem;
  margin-bottom: 0;
  color: var(--ink-soft);
  line-height: 1.55;
}

.visibility-form {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding-left: clamp(1.5rem, 4vw, 3rem);
  border-left: 1px solid var(--line);
}

.visibility-form__choice {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.visibility-form__choice input { width: 1.15rem; min-height: 1.15rem; }
.visibility-form .primary-button { width: 100%; }
.sharing-panel__link { display: inline-block; text-decoration: none; }

.cover-field__preview {
  width: min(18rem, 100%);
  margin-bottom: 0.75rem;
  display: block;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  object-fit: cover;
  aspect-ratio: 16 / 10;
}

.cover-field .field-hint { margin: 0.5rem 0 0; }

.public-map {
  min-height: 100vh;
}

.public-map__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
}

.public-map__header h1 {
  max-width: 13ch;
  margin: 0;
  font-size: clamp(3.4rem, 8vw, 7rem);
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 0.9;
}

.public-map__cover-stage { margin-bottom: 0; }

.public-map__map-stage {
  width: min(1120px, 100%);
  height: min(42rem, calc(100vw - 3rem));
  margin-inline: auto;
  margin-block: clamp(2.5rem, 7vw, 6rem);
}

.public-place-map {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(57, 122, 235, 0.22);
  border-radius: 1.25rem;
  background: #f7faff;
  box-shadow: 0 24px 64px rgba(11, 41, 66, 0.12);
}

/* Google draws its own logo and credit inside the map, anchored to the bottom
   corners, and nothing may cover or clip them. The map element therefore
   carries no overlay of its own. The rounded corner above is the one open
   question: it can only be measured against the real Google chrome, so it is
   listed for live verification on issue #21 and #16. */

/* The place-name label beside a marker. It keeps Leaflet's look and geometry:
   a white box 6px right of the marker point, centred on it. */
.basemap-tooltip {
  position: absolute;
  transform: translateY(-50%);
  padding: 6px;
  background: #fff;
  border: 1px solid #fff;
  border-radius: 3px;
  color: #222;
  font-size: 0.8125rem;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  z-index: 2;
}

.basemap-tooltip::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -6px;
  border: 6px solid transparent;
  border-right-color: #fff;
  pointer-events: none;
}

/* A keyed basemap has failed quietly here before. When the key is missing the
   ground says so. */
.basemap-missing {
  display: grid;
  place-content: center;
  height: 100%;
  margin: 0;
  padding: 1.5rem;
  text-align: center;
  color: #625b70;
}

/* app/javascript/maps/basemap_stub.js, drawn when no browser key is set. */
.stub-basemap { position: relative; }
.stub-basemap__surface { position: absolute; inset: 0; overflow: hidden; }
.stub-basemap__overlays { position: absolute; inset: 0; }
.stub-basemap__marker {
  position: absolute;
  width: calc(var(--marker-radius) * 2);
  height: calc(var(--marker-radius) * 2);
  margin-left: calc(var(--marker-radius) * -1);
  margin-top: calc(var(--marker-radius) * -1);
  border: var(--marker-ring-width) solid var(--marker-ring);
  border-radius: 50%;
  background: var(--marker-fill);
  opacity: var(--marker-fill-opacity);
}
.stub-basemap__zoom { position: absolute; display: grid; z-index: 3; }
.stub-basemap__zoom--top-left { top: 0.625rem; left: 0.625rem; }
.stub-basemap__zoom--bottom-right { right: 0.625rem; bottom: 1.5rem; }
.stub-basemap__zoom button {
  width: 1.875rem;
  height: 1.875rem;
  border: 1px solid rgba(57, 122, 235, 0.22);
  color: #0b2942;
  background: rgba(255, 255, 255, 0.94);
  cursor: pointer;
}
.stub-basemap__credit {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0 5px;
  font-size: 0.6875rem;
  color: #625b70;
  background: rgba(255, 255, 255, 0.86);
  z-index: 3;
}

.public-map__cover {
  width: 100%;
  height: min(48vw, 34rem);
  min-height: 18rem;
  display: block;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  object-fit: cover;
}

.public-map__cover-fallback {
  min-height: 22rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 50% 50%, rgba(229, 106, 66, 0.14), transparent 11rem),
    var(--surface);
  box-shadow: var(--shadow);
}

.public-map__cover-fallback span {
  width: 4rem;
  height: 4rem;
  grid-area: 1 / 1;
  border: 2px solid var(--signal);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

.public-map__cover-fallback p {
  grid-area: 1 / 1;
  align-self: end;
  margin: 0 0 2rem;
  font-family: "Avenir Next", Avenir, "Century Gothic", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.public-place-list {
  display: grid;
  gap: 1rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: public-place;
}

.public-place-list > li { counter-increment: public-place; }

.public-place-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 0.7fr);
  gap: 1rem 2rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--line);
}

.public-place-card::before {
  grid-row: span 2;
  align-self: start;
  color: var(--signal);
  content: counter(public-place, decimal-leading-zero);
  font-family: "Avenir Next", Avenir, "Century Gothic", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
}

.public-place-card h2 { margin: 0 0 0.4rem; font-size: 1.45rem; }
.public-place-card address { color: var(--ink-soft); font-style: normal; line-height: 1.5; }
.public-place-card__note { margin: 0; font-style: italic; line-height: 1.6; }
.public-place-card .place-result__attribution { grid-column: 2 / -1; text-align: left; }

@media (max-width: 760px) {
  .sharing-panel__visibility { grid-template-columns: 1fr; }
  .visibility-form { padding: 1.5rem 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .public-map__header { align-items: flex-start; flex-direction: column; }
  .public-place-card { grid-template-columns: 1fr; }
  .public-place-card::before { grid-row: auto; }
  .public-place-card .place-result__attribution { grid-column: auto; }
}