.sharing-panel {
  margin-bottom: 2rem;
  padding: 1.5rem;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius-m);
}

.sharing-panel h2 {
  margin: 0;
  font-size: 1.2rem;
  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: 2rem;
}

.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;

  /* The cover and the map below it stand exactly as tall as each other, so the
     two stages read as one block. One value drives both, so they cannot drift
     apart. 18rem is the floor on a narrow screen. */
  --stage-height: max(18rem, min(48vw, 34rem));
}

.public-map__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 2rem;
}

.public-map__header h1 {
  max-width: 26ch;
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 4vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

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

.public-places { margin-top: clamp(2rem, 4vw, 3rem); }

/* The Map editor's canvas. The public page passes its own stage class: there
   the map is a column inside the Places panel, not a band of its own. */
.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: var(--radius-m);
  background: #f7faff;
  box-shadow: var(--shadow);
}

/* 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 the visual centre of a Wayfinder pin. */
.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__marker--wayfinder {
  width: 42px;
  height: 50px;
  margin-left: -21px;
  margin-top: -50px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 1;
}
.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: var(--stage-height);
  display: block;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  object-fit: cover;
  border-radius: var(--radius-m);
}

.public-map__cover-fallback {
  height: var(--stage-height);
  border-radius: var(--radius-m);
  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: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Two thirds map, one third list. The list scrolls inside its own column, so
   the panel keeps the cover's height however many Places the map holds. */
.public-places__layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  height: var(--stage-height);
  background: transparent;
}

/* min-width: 0 lets a grid column shrink below the width of its content. */
.public-places__map {
  min-width: 0;
  height: 100%;
}

/* The map keeps the same quiet edge as the adjoining Place cards. */
.public-places__map .public-place-map { border-radius: var(--radius-m); }

.public-places__rail {
  min-width: 0;
  height: 100%;
  padding: 3px 0.5rem 3px 3px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.public-places__rail .public-place-list { margin-top: 0; }

/* The rail is too narrow for the two-column card, so its parts stack. */
.public-places__rail .public-place-card {
  grid-template-columns: 1fr;
  gap: 0.35rem;
  padding: 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
}

.public-places__rail .public-place-card::before { grid-row: auto; }
.public-places__rail .public-place-card h3 { margin-bottom: 0.3rem; font-size: 1.15rem; }
.public-places__rail .public-place-card address { font-size: 0.92rem; }
.public-places__rail .public-place-card .place-result__attribution {
  grid-column: auto;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.45;
  text-transform: none;
}

/* The first name lines up with the top edge of the map beside it. */
.public-places__rail .public-place-list > li:first-child .public-place-card {
  padding-top: 1.15rem;
}

.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: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
}

.public-place-card h3 { 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) {
  .public-places__layout { grid-template-columns: 1fr; height: auto; gap: 1.5rem; }
  .public-places__map { height: var(--stage-height); }
  .public-places__rail {
    height: auto;
    padding-right: 0;
    overflow: visible;
    animation: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .public-places__rail .public-place-list > li:first-child .public-place-card {
    padding-top: 1.15rem;
    border-top: 1px solid var(--line);
  }

  .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; }
}