/* Shared editors only. Feature styles retain ownership of dialog widths.
   Header/actions stay visible; only the form body scrolls. */
#editor[open]:has(> #modal-form){
 --editor-surface:#fff;
 position:fixed;
 inset-block-start:calc(var(--editor-viewport-top,0px) + 16px);
 inset-block-end:auto;
 margin:0 auto;
 max-height:min(calc(100dvh - 32px),calc(var(--editor-viewport-height,100dvh) - 32px));
 padding:0;
 overflow:hidden;
 background:var(--editor-surface);
}
/* One-type specificity matches only the base dialog rule. Every existing
   feature width outranks it, even when this file is loaded last. */
dialog:where(#editor[open]:has(> #modal-form)){width:min(720px,calc(100vw - 32px))}
#editor:has(> #modal-form > .reading-nook){--editor-surface:#fffdf8}
/* Migrate feature padding into the scrolling body and fixed chrome, not an
   extra outer layer. Keep the existing Shopping rhythm at every breakpoint. */
#editor:has(> #modal-form [data-staples-dialog]){--editor-inset:24px;--editor-header-top:24px;--editor-bottom:24px;--editor-actions-gap:12px}
#editor:has(> #modal-form [data-kroger-dialog]){--editor-inset:28px;--editor-header-top:28px;--editor-bottom:28px;--editor-actions-gap:12px}
#editor[open]:has(> #modal-form) > #modal-form{
 display:flex;
 flex-direction:column;
 max-height:min(calc(100dvh - 34px),calc(var(--editor-viewport-height,100dvh) - 34px));
 min-height:0;
 margin:0;
 padding:0;
}
#editor > #modal-form > .section-head,
#editor > #modal-form > .modal-actions,
#editor > #modal-form > #modal-error{
 flex:none;
 position:relative;
 z-index:1;
 margin:0;
 background:var(--editor-surface);
 padding:12px max(var(--editor-inset,20px),env(safe-area-inset-right)) 12px max(var(--editor-inset,20px),env(safe-area-inset-left));
}
#editor > #modal-form > .section-head{border-bottom:1px solid var(--line);padding-top:max(var(--editor-header-top,12px),env(safe-area-inset-top));gap:12px}
#editor > #modal-form > .section-head h2{overflow-wrap:anywhere;min-width:0}
#editor > #modal-form > .section-head .icon-button{flex:none;min-width:44px;min-height:44px}
#editor > #modal-form > :is(.modal-body,.reading-nook){
 flex:1 1 auto;
 min-height:0;
 min-width:0;
 overflow:auto;
 overscroll-behavior:contain;
 -webkit-overflow-scrolling:touch;
 scroll-padding-block:16px;
 padding:20px max(var(--editor-inset,20px),env(safe-area-inset-right)) 4px max(var(--editor-inset,20px),env(safe-area-inset-left));
 margin:0;
 overflow-wrap:anywhere;
}
#editor > #modal-form > #modal-error:not([hidden]){max-height:5.5em;overflow:auto;padding-block:8px;border-top:1px solid var(--line)}
#editor > #modal-form > .modal-actions{border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:var(--editor-actions-gap,10px);padding-bottom:max(var(--editor-bottom,12px),env(safe-area-inset-bottom))}
#editor > #modal-form > .modal-actions button{min-height:44px;white-space:normal;overflow-wrap:anywhere}
@media(max-width:600px){
 #editor:has(> #modal-form [data-staples-dialog]){--editor-inset:16px;--editor-header-top:16px;--editor-bottom:16px}
 #editor:has(> #modal-form [data-kroger-dialog]){--editor-inset:20px;--editor-header-top:20px;--editor-bottom:20px}
}
@media(max-width:480px){
 #editor > #modal-form > .modal-actions button{flex:1 1 auto}
}