#modal:has(.studio-form){width:min(1120px,calc(100% - 32px));max-width:1120px;max-height:min(94dvh,940px);padding:25px 30px 18px;overflow:hidden}
#modal:has(.studio-form) #modal-body{display:flex;flex-direction:column;min-height:0}
#modal:has(.studio-form) #modal-body>h2{margin:0 54px 8px 0}
#modal:has(.studio-form) #modal-body>p:not(.eyebrow){margin:0 0 8px}
#modal-body .studio-layout{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);align-items:start;gap:16px 28px;min-width:0}
#modal-body .studio-primary,#modal-body .studio-secondary{grid-column:1;min-width:0}
#modal-body .studio-preview-panel{grid-column:2;grid-row:1 / span 2;position:sticky;top:0;min-width:0;padding:16px;border:1px solid #d9d2c2;background:#f8f5ec}
#modal-body .studio-preview-panel .activity-preview-head{margin-top:0}
#modal-body .studio-preview-panel .activity-preview-image{min-height:150px}
#modal-body .studio-preview-panel .activity-preview-image img,#modal-body .studio-preview-panel .postcard-preview{max-height:min(48vh,420px);margin:0;object-fit:contain}
#modal-body .studio-secondary{border-top:1px solid #d9d2c2;padding-top:2px}
#modal-body .studio-secondary>.field:first-child{margin-top:12px}
#modal-body .studio-options{margin:12px 0;border-top:1px solid #d9d2c2;border-bottom:1px solid #d9d2c2}
#modal-body .studio-options>summary{display:flex;align-items:center;min-height:48px;cursor:pointer;font-size:12px;font-weight:700}
#modal-body .studio-options[open]{padding-bottom:12px}
#modal-body .studio-options details{margin:12px 0}
#modal-body .studio-options details>summary{display:flex;align-items:center;min-height:44px;cursor:pointer}
#modal-body .studio-footer{position:sticky;bottom:-1px;z-index:2;display:flex;flex-flow:row wrap;gap:10px;margin:8px -5px -1px;padding:12px 5px max(10px,env(safe-area-inset-bottom));border-top:1px solid #d9d2c2;background:#f4f0e5}
#modal-body .studio-footer>*{flex:1 1 180px;min-height:48px}
#modal-body .studio-form :is(input,select,textarea,button,summary){scroll-margin-block:18px}
#modal-body .studio-form textarea{min-height:132px}
@media(max-width:760px){
 #modal:has(.studio-form){position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:100dvh;margin:0;padding:14px 16px max(8px,env(safe-area-inset-bottom));border:0;border-radius:0}
 #modal:has(.studio-form) #modal-body{min-height:0}
 #modal-body .studio-layout{grid-template-columns:minmax(0,1fr);gap:0}
 #modal-body .studio-primary,#modal-body .studio-secondary,#modal-body .studio-preview-panel{grid-column:1;grid-row:auto}
 #modal-body .studio-preview-panel{position:static;order:2;margin:4px 0 13px;padding:11px}
 #modal-body .studio-primary{display:contents}
 #modal-body .studio-primary>.field{grid-column:1}
 #modal-body .studio-secondary{order:3}
 #modal-body .studio-preview-panel .activity-preview-image img,#modal-body .studio-preview-panel .postcard-preview{max-height:min(33dvh,300px)}
 #modal-body .studio-form textarea{min-height:108px}
 #modal-body .studio-primary>.recipient-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:4px 0 10px;padding:0}
 #modal-body .studio-primary>.recipient-options legend{margin-bottom:8px}
 #modal-body .studio-primary>.recipient-options .check{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;min-height:76px;margin:0;padding:9px 7px;border:1px solid #d9d2c2;background:#fbf9f1;font-size:11px;line-height:1.35}
 #modal-body .studio-primary>.recipient-options .check:has(input:checked){border-color:#52634b;background:#e9ede1}
 #modal-body .studio-primary>.field{margin:12px 0}
 #modal-body .studio-footer>button{flex:1 1 0;min-width:0}
 #modal-body .studio-footer [role=alert]:empty,#modal-body .studio-footer [role=status]:empty{display:none}
 #modal-body .studio-footer{margin-top:6px;padding-top:9px}
 #modal-body .studio-footer>[role=alert],#modal-body .studio-footer>[role=status]{flex:1 0 100%}
}
@media(max-height:620px) and (max-width:760px){
 #modal-body .studio-preview-panel{padding:8px}
 #modal-body .studio-preview-panel .activity-preview-head{margin-bottom:4px}
 #modal-body .studio-preview-panel .activity-preview-head h3{font-size:18px}
 #modal-body .studio-preview-panel .activity-preview-image img,#modal-body .studio-preview-panel .postcard-preview{max-height:24dvh}
 #modal-body .studio-preview-panel .activity-preview-disclaimer{margin-top:4px}
}
