/* Reserve page/inner scrollbars; expanding content never recentres an open window. */
html{scrollbar-gutter:stable;--dialog-gap:24px}
html:has(dialog:modal){overflow:hidden;overscroll-behavior:none}
dialog:modal{position:fixed;inset-block-start:calc(var(--dialog-viewport-top,0px) + var(--dialog-gap));inset-block-end:auto;margin-block:0;max-height:calc(var(--dialog-viewport-height,100dvh) - 2 * var(--dialog-gap));overflow-y:auto;overscroll-behavior:contain;overflow-anchor:none;scrollbar-gutter:stable}
#meal-dialog:modal{display:flex;flex-direction:column;height:min(680px,calc(var(--dialog-viewport-height,100dvh) - 2 * var(--dialog-gap)));max-height:calc(var(--dialog-viewport-height,100dvh) - 2 * var(--dialog-gap));overflow:hidden;scrollbar-gutter:auto}
#meal-dialog>.dialog-heading{flex:none}
#meal-dialog>.entry-content{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;overflow-anchor:none;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#b9c5af transparent;padding:3px}
/* Put the scroll rail toward the outer edge while keeping fields inside its left edge. */
#meal-dialog{--entry-scroll-rail:18px}
#meal-dialog:not(.entry-camera-open)>.entry-content{margin-inline-end:calc(-1 * var(--entry-scroll-rail));padding-inline-end:calc(var(--entry-scroll-rail) + 3px)}
#meal-dialog:modal[data-entry-mode=food]{height:auto;width:min(780px,calc(100vw - 2 * var(--dialog-gap)))}
#meal-dialog[data-entry-mode=food]>.entry-content{flex:0 1 auto}
#meal-dialog:modal[data-entry-mode=food].entry-editing{width:min(1240px,calc(100vw - 2 * var(--dialog-gap)))}
#meal-dialog .photo-preview{height:230px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
#meal-dialog .photo-preview img{max-height:180px;max-width:100%;object-fit:contain;min-height:0;flex:1}
#meal-dialog .photo-preview button{flex:none;margin:0}
#meal-dialog #live-camera video{display:block;aspect-ratio:4/3;max-height:260px;object-fit:contain;background:#f5f7f0}
@media(max-width:650px){
  html{--dialog-gap:12px}
  #meal-dialog{--entry-scroll-rail:12px}
  /* A readable input size also prevents a phone browser zooming in on focus. */
  dialog:modal input:not([type=checkbox]):not([type=radio]):not([type=file]),dialog:modal select,dialog:modal textarea{font-size:max(16px,1em)}
  #portrait-measure-dialog #portrait-measure-form input{font-size:16px}
}
@media(max-width:380px){#meal-dialog .dialog-heading h2{font-size:20px}}
@media print{html{scrollbar-gutter:auto}}