.sharing-panel {
  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 {
  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;

  /* 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: 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-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: 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: var(--stage-height);
  display: block;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  object-fit: cover;
}

.public-map__cover-fallback {
  height: var(--stage-height);
  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;
}

/* 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: var(--surface);
}

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

/* Square, because the map is a plate laid on the page, not a card floating on
   it. The Map editor's canvas keeps the rounded corner it has. */
.public-places__map .public-place-map { border-radius: 0; }

/* The fade at the foot of the rail. It is a length so that it can be animated
   away, and it needs @property to interpolate rather than jump. */
@property --rail-fade {
  syntax: "<length>";
  inherits: false;
  initial-value: 2.75rem;
}

.public-places__rail {
  --rail-fade: 2.75rem;

  min-width: 0;
  height: 100%;
  padding-right: 0.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;

  /* Reserve the scrollbar's width even when the list is short, so a map with
     many Places does not shift the column narrower than one with few. */
  scrollbar-gutter: stable;

  /* The column cuts the list wherever the map ends, which can slice a line of
     text in half. This softens the cut, so it reads as "there is more below".
     A short list fades over its own empty space, which shows nothing. */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--rail-fade)), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--rail-fade)), transparent);
}

/* Where the browser reads scroll position in CSS, the fade lifts as the list
   reaches its end, so the last Place is never dimmed. Where it does not, the
   fade simply stays on. */
@supports (animation-timeline: scroll()) {
  .public-places__rail {
    animation: rail-fade linear both;
    animation-timeline: scroll(self block);
  }
}

@keyframes rail-fade {
  0%, 85% { --rail-fade: 2.75rem; }
  100% { --rail-fade: 0px; }
}

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

.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.65rem;
  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: 0;
  border-top: 0;
}

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