/* =====================================================================================================================
   The site's page pop-ups (static/js/pagemodal.js): a page of the site (its ?embed=1 view, embed.css) opened over the
   current page instead of navigating to it. The account menu's Your account, My creations, Link Studio and Get the plugin
   use it; any link can with data-modal.

     dialog.pmodal (native <dialog>, showModal: the page underneath is inert)
       ::backdrop       a dark scrim that BLURS the page (a solid one where backdrop-filter isn't supported)
       .pmodal-box      the dark rounded panel (--surface-2)
         .pmodal-head   the title top-left, the square bordered close button top-right
         .pmodal-body   the frame (auto-sized to its page up to ~85% of the screen, then it scrolls inside) and the
                        loading state shown until the page has drawn
     sizes  .pmodal-sm (640) · .pmodal-md (820) · .pmodal-lg (1040, the default): as tall as the page, up to ~85vh
            .pmodal-xl min(1200px, 92vw) x 88vh (galleries, My creations, results, pricing, the makers)
     phones (<= 640px): a full-height bottom sheet that slides up
   Opens with a short fade + scale; no motion under prefers-reduced-motion. Tokens from theme.css.
   ===================================================================================================================== */
html.pmodal-lock { overflow: hidden; }
dialog.pmodal { border: 0; padding: 0; margin: auto; background: transparent; color: var(--ink); overflow: visible;
  width: min(1040px, calc(100vw - 48px)); max-width: none; max-height: none; }
dialog.pmodal.pmodal-md { width: min(820px, calc(100vw - 48px)); }
dialog.pmodal.pmodal-sm { width: min(640px, calc(100vw - 48px)); }
dialog.pmodal.pmodal-xl { width: min(1200px, 92vw); }
dialog.pmodal:focus { outline: none; }
dialog.pmodal::backdrop { background: rgba(4, 4, 6, 0.58); -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  dialog.pmodal::backdrop { background: rgba(4, 4, 6, 0.88); }
}

.pmodal-box { display: flex; flex-direction: column; max-height: min(85vh, 85dvh); background: var(--surface-2);
  border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow-3), inset 0 1px 0 rgba(255, 255, 255, 0.05); overflow: hidden; }
.pmodal-head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 10px 22px; flex: none; }
.pmodal-head h2 { margin: 0; font-size: 1.08rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmodal-x { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: var(--r-xs);
  border: 1px solid var(--line-2); background: transparent; color: var(--ink-2); cursor: pointer; transition: background var(--t, .18s), color var(--t, .18s), border-color var(--t, .18s); }
.pmodal-x:hover { background: rgba(255, 255, 255, 0.06); color: var(--ink); border-color: rgba(255, 255, 255, 0.24); }
.pmodal-x:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.pmodal-x .i { width: 18px; height: 18px; }

.pmodal-body { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }
.pmodal-frame { display: block; width: 100%; border: 0; background: var(--surface-2); color-scheme: normal;
  height: 260px; max-height: calc(min(85vh, 85dvh) - 62px); transition: opacity 0.16s ease; }
.pmodal-body.is-loading .pmodal-frame { opacity: 0; }
dialog.pmodal-xl .pmodal-box { height: min(88vh, 88dvh); max-height: min(88vh, 88dvh); }
dialog.pmodal-xl .pmodal-frame { height: 100% !important; max-height: none; }
.pmodal-load { position: absolute; inset: 0; display: none; place-items: center; align-content: center; gap: 12px; color: var(--ink-2); font-size: var(--fs-small); }
.pmodal-body.is-loading .pmodal-load { display: grid; }
.pmodal-spin { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.14); border-top-color: var(--blue); animation: pmodal-spin 0.8s linear infinite; }

/* open / close */
dialog.pmodal[open] .pmodal-box { animation: pmodal-in 0.2s var(--ease-out, ease-out); }
dialog.pmodal[open]::backdrop { animation: pmodal-fade 0.2s ease-out; }
dialog.pmodal.is-closing .pmodal-box { animation: pmodal-out 0.14s ease-in forwards; }
dialog.pmodal.is-closing::backdrop { animation: pmodal-fade 0.14s ease-in reverse forwards; }
@keyframes pmodal-in { from { opacity: 0; transform: translateY(6px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes pmodal-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(4px) scale(0.98); } }
@keyframes pmodal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pmodal-spin { to { transform: rotate(360deg); } }
@keyframes pmodal-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes pmodal-down { from { transform: none; } to { transform: translateY(100%); } }

/* phones: a full-height bottom sheet */
@media (max-width: 640px) {
  dialog.pmodal, dialog.pmodal.pmodal-md, dialog.pmodal.pmodal-sm, dialog.pmodal.pmodal-xl { width: 100vw; margin: auto 0 0; }
  .pmodal-box, dialog.pmodal-xl .pmodal-box { height: calc(100dvh - 12px); max-height: calc(100vh - 12px); border-radius: 20px 20px 0 0; border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom); }
  .pmodal-head { padding: 12px 12px 8px 18px; }
  .pmodal-frame { height: 100% !important; max-height: none; }
  dialog.pmodal[open] .pmodal-box { animation: pmodal-up 0.26s var(--ease-out, ease-out); }
  dialog.pmodal.is-closing .pmodal-box { animation: pmodal-down 0.18s ease-in forwards; }
}
@media (prefers-reduced-motion: reduce) {
  dialog.pmodal .pmodal-box, dialog.pmodal::backdrop, dialog.pmodal[open] .pmodal-box, dialog.pmodal[open]::backdrop,
  dialog.pmodal.is-closing .pmodal-box, dialog.pmodal.is-closing::backdrop { animation: none !important; }
  .pmodal-frame { transition: none; }
  .pmodal-spin { animation-duration: 2.4s; }
}