/* Transparent scroll viewport; the shared project-detail owns the entire frame.
   Width follows Collection Page's public-page container geometry. */
body.collection-modal-open { overflow: hidden; }
.collection-modal-backdrop {
  position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center;
  padding: 24px 0; background: var(--modal-backdrop); backdrop-filter: blur(8px);
  --collection-gutter: 24px;
}
.collection-modal-backdrop[hidden] { display: none; }
.collection-modal-panel {
  position: relative;
  width: min(clamp(1180px, calc(100% - 260px - (100% - 1440px) / 6), 1580px), calc(100% - var(--collection-gutter) * 2));
  max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
  min-width: 0; min-height: 0; padding: 0; border: 0; background: transparent;
  border-radius: var(--radius-lg); color: var(--text-primary);
}
.collection-modal-body { overflow-y: auto; overscroll-behavior: contain; }
.collection-modal-panel .collection-modal-close.btn.frost-btn {
  position: absolute; top: 16px; right: 24px; z-index: 2;
  --btn-height: 40px; --btn-pad-x: 0px; --btn-radius: var(--radius-md);
  width: 40px; height: 40px; min-height: 40px; padding: 0; font-size: 16px;
}
.collection-modal-panel:not(:has(.project-detail)) { background: var(--bg-surface-1); }
.collection-modal-message { padding: 24px 80px 24px 24px; color: var(--text-secondary); }
.collection-modal-body > .btn:not(.collection-modal-close) { margin: 0 24px 24px; }
.collection-modal-panel :focus-visible { outline: 2px solid var(--accent-violet); outline-offset: 2px; }
@media (max-width: 820px) {
  .collection-modal-backdrop { --collection-gutter: 16px; }
}
@media (max-width: 767px) {
  .collection-modal-backdrop { --collection-gutter: 12px; padding-block: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-bottom)); }
  .collection-modal-panel {
    max-width: calc(100% - max(12px, env(safe-area-inset-left)) - max(12px, env(safe-area-inset-right)));
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom)));
  }
  .collection-modal-panel .collection-modal-close.btn.frost-btn { top: 12px; right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .collection-modal-panel .frost-btn__spinner { animation: none; }
}