/* Site skin for PathMX 0.7.7 source previews. Keep native positioning,
   focus, dismissal and link behavior. These selectors are the isolated
   compatibility boundary to check when upgrading PathMX. */
.pmx-source-preview {
  width: min(var(--cm-preview-width), calc(100vw - 1.5rem));
}
.pmx-source-preview::before,
.pmx-source-preview-source,
.pmx-source-preview .pmx-source-identity-type { display: none; }

.pmx-source-preview-card {
  gap: var(--cm-space-4);
  padding: var(--cm-space-4);
  border: 1px solid color-mix(in srgb, var(--pmx-color-border) 45%, transparent);
  border-radius: 0;
  background: var(--pmx-color-bg);
  box-shadow: 0 0 var(--cm-space-6) var(--cm-space-1) var(--pmx-shadow-color);
}
.pmx-source-preview-card:has(.pmx-source-preview-image:not([hidden])) {
  grid-template-columns: minmax(0, var(--cm-preview-art-width)) minmax(0, 1fr);
  align-items: center;
}
.pmx-source-preview-image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
}
.pmx-source-preview-title {
  font-family: var(--cm-font-label);
  font-size: var(--cm-text-small);
  font-weight: var(--cm-weight-heading);
  line-height: var(--cm-leading-heading);
  letter-spacing: normal;
}
.pmx-source-preview-description {
  margin-block-start: var(--cm-space-2);
  font-family: var(--cm-font-label);
  font-size: var(--cm-text-label);
  font-weight: var(--cm-weight-text);
  line-height: var(--cm-leading-label);
  -webkit-line-clamp: 3;
}
.pmx-source-preview[data-open] .pmx-source-preview-card {
  animation: cm-preview-enter var(--cm-preview-duration) var(--cm-preview-ease) both;
}
@keyframes cm-preview-enter {
  from { opacity: 0; transform: translateY(var(--cm-space-1)); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .pmx-source-preview[data-open] .pmx-source-preview-card { animation: none; }
}

/* Native previews are anchors. Show the affordance only for a destination. */
.pmx-source-preview[href] .pmx-source-preview-title::after {
  content: " →";
  color: var(--pmx-color-muted);
  font-size: var(--cm-text-label);
  font-weight: var(--cm-weight-text);
  white-space: nowrap;
}