.atlas-picker-context { display: block; margin-top: 3px; color: var(--muted); }
/* A short landscape viewport can scroll down to the active map and its preview. */
.workspace #map-panel:has(.pin-preview:not([hidden])) {
  min-height: min(330px, 100dvh);
}
.pin-preview {
  position: absolute;
  z-index: 5;
  left: 12px;
  bottom: 30px;
  display: flex;
  flex-direction: column;
  width: 424px;
  max-width: calc(100% - 76px);
  container-type: inline-size;
  max-height: min(440px, max(62%, 210px), calc(100% - 80px));
  overflow: hidden;
  background: var(--panel);
  border: 1px solid #afb9aa;
  border-radius: 12px;
  box-shadow: 0 3px 18px #233c3038;
  color: var(--ink);
  font-family: var(--sans);
}
.pin-preview-content {
  padding: 14px 16px 10px;
  overflow-y: auto;
  overflow-wrap: anywhere;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.crop-atlas:has(.pin-preview:not([hidden])) .atlas-feedback {
  top: 50px;
  bottom: auto;
}
.pin-preview-kind {
  padding-right: 32px;
  color: var(--rust);
  font-size: 11px;
  font-weight: 700;
}
.pin-preview-name {
  margin: 4px 28px 0 0;
  overflow-wrap: anywhere;
  color: var(--green);
  font: 600 20px/1.16 var(--serif);
}
.pin-preview-name:focus { outline: none; }
.pin-preview-name:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.pin-preview-close {
  position: absolute;
  right: 4px;
  top: 4px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: var(--panel);
  color: var(--green);
  border-radius: 50%;
}
.pin-preview-close:hover, .pin-details:hover, .pin-save:hover, .pin-share:hover { background: var(--sage); }
.pin-preview p { margin: 6px 0 0; line-height: 1.35; }
.pin-preview-location {
  display: inline-flex;
  align-items: center;
  margin-top: 4px;
  line-height: 1.35;
  font-size: 13px;
  color: var(--muted);
}
.pin-preview-location[href] {
  min-height: 28px;
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pin-preview-schedule { font-size: 13px; font-weight: 600; }
.pin-preview-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 0 14px;
  margin-top: 3px;
}
.pin-preview-contacts a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  color: var(--green);
  font-size: 13px;
  font-weight: 650;
  text-underline-offset: 3px;
}
.pin-preview-facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 10px;
  margin: 8px 0 0;
  font: 400 13px/1.4 var(--sans);
}
.pin-preview-facts dt { color: var(--muted); }
.pin-preview-facts dd { margin: 0; }
.pin-preview-actions { display: flex; flex: none; gap: 7px; padding: 7px 14px; border-top: 1px solid var(--line); }
.pin-preview-actions > * {
  display: inline-flex;
  flex: 1 0 auto;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  gap: 6px;
  min-height: 36px;
  padding: 5px 12px;
  border-radius: 7px;
  font: 650 13px/1.2 var(--sans);
}
.pin-directions { background: var(--green); color: white; text-decoration: none; }
.pin-directions:hover { background: #2c543d; }
.pin-directions svg { width: 16px; height: 16px; }
.pin-details, .pin-save, .pin-share { border: 1px solid var(--line); color: var(--green); }
.pin-save svg, .pin-share svg { width: 16px; height: 16px; }
.pin-save[aria-pressed='true'] { background: var(--sage); }
.pin-save[aria-pressed='true'] svg { fill: currentColor; }
@media (pointer: coarse) {
  .pin-preview-close { width: 44px; height: 44px; }
  .pin-preview-contacts a, .pin-preview-location[href] { min-height: 44px; }
  .pin-preview-actions > * { min-width: 44px; min-height: 44px; }
}
@media (max-width: 710px) {
  .pin-preview { left: 8px; bottom: 25px; max-width: calc(100% - 71px); }
  .pin-preview-content { padding: 12px; }
  .pin-preview-name { font-size: 18px; }
}
@container (max-width: 400px) {
  .pin-preview-actions { gap: 5px; padding: 6px 8px; }
  .pin-preview-actions > * { padding-inline: 8px; }
  .pin-share svg { display: none; }
}
@container (max-width: 350px) {
  .pin-preview-actions { gap: 3px; padding-inline: 4px; }
  .pin-preview-actions > * { padding-inline: 3px; }
  .pin-preview-actions svg { display: none; }
}