/* Only managed prompts: tables, anchored help and calendar panels are excluded. */
dialog.ap-modal{max-width:calc(100vw - 2 * max(8px,env(safe-area-inset-left),env(safe-area-inset-right)));padding:0;border:0;border-radius:13px;overflow:visible;background:transparent;color:var(--ap-color-text);box-sizing:border-box}
/* The container is not an action; keep focus indicators on its controls. */
dialog.ap-modal:focus{outline:none}
dialog.ap-modal::backdrop{background:rgba(0,0,0,.64);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
dialog.ap-modal>.ap-modal-card{max-height:inherit;min-height:0;padding:0;border:1px solid var(--ap-color-header-border);border-radius:13px;display:flex;flex-direction:column;overflow:hidden;background:var(--ap-color-surface);box-shadow:0 22px 64px rgba(0,0,0,.35);box-sizing:border-box}
dialog.ap-modal[data-ap-modal-fill="true"]>.ap-modal-card{height:100%}
dialog.ap-modal .ap-modal-header{flex:0 0 auto;min-height:68px;margin:0;padding:14px 18px;border-bottom:2px solid var(--ap-color-header-border);border-radius:0;display:flex;align-items:center;gap:13px;background:var(--ap-color-header);color:var(--ap-color-header-text);box-sizing:border-box}
dialog.ap-modal .ap-modal-header>div{min-width:0;flex:1}
dialog.ap-modal .ap-modal-header h2{margin:0;font:800 16px/1.15 Arial,sans-serif;text-transform:uppercase;overflow-wrap:anywhere;color:inherit}
dialog.ap-modal .ap-modal-header p{margin:3px 0 0;font-size:14px;line-height:1.25;color:var(--ap-color-header-muted)}
dialog.ap-modal .ap-modal-body{min-height:0;flex:1 1 auto;padding:16px 18px 12px;overflow-y:auto;overscroll-behavior:contain;background:var(--ap-color-surface)}
/* Search pickers scroll their results, not their filters or pagination. */
dialog.ap-modal.ap-food-picker .ap-modal-body:not(.training-dialog-body),dialog.ap-modal.nutrition-dialog--list .ap-modal-body{overflow:hidden}
/* Expanded filters must not hide results/actions in a short mobile viewport. */
dialog.ap-modal[data-ap-modal-short="true"] .ap-modal-body:has(.ap-food-picker__filters.is-open){overflow-y:auto}
dialog.ap-modal[data-ap-modal-short="true"] .ap-modal-body:has(.ap-food-picker__filters.is-open)>*{flex-shrink:0}
dialog.ap-modal[data-ap-modal-short="true"] .ap-modal-body:has(.ap-food-picker__filters.is-open) .ap-food-picker__results{min-height:140px;max-height:220px}
dialog.ap-modal[data-ap-modal-scroll-picker="true"]:is(.ap-food-picker,.nutrition-dialog--list) .ap-modal-body:not(.training-dialog-body){overflow-y:auto}
dialog.ap-modal[data-ap-modal-scroll-picker="true"]:is(.ap-food-picker,.nutrition-dialog--list) .ap-modal-body>*{flex-shrink:0}
dialog.ap-modal[data-ap-modal-scroll-picker="true"] :is(.ap-food-picker__results,.nutrition-supplement-picker__results){min-height:140px;max-height:220px}
dialog.ap-modal .ap-modal-footer{flex:0 0 auto;min-width:0;margin:0;padding:12px 18px 16px;gap:10px;background:var(--ap-color-surface)}
/* Actions inside a form body share its padding and scroll; no second inset. */
dialog.ap-modal .ap-modal-body>.ap-modal-footer{padding:12px 0 0}
dialog.ap-modal .ap-modal-header>.ap-modal-close{position:relative;width:40px;height:42px;min-width:40px;flex:0 0 40px;margin:0 0 0 auto;padding:0;border:1px solid color-mix(in srgb,var(--ap-gold) 72%,#fff);border-radius:8px;appearance:none;background:var(--ap-gold);color:#111;box-sizing:border-box;box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 28%,transparent),0 2px 8px color-mix(in srgb,var(--ap-gold) 24%,transparent);cursor:pointer}
dialog.ap-modal .ap-modal-close>.ap-popup-close-icon{position:absolute;top:50%;left:50%;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;transform:translate(-50%,-50%)}
dialog.ap-modal .ap-modal-close:focus-visible{outline:2px solid var(--ap-color-text);outline-offset:2px}
/* With a keyboard or very short landscape screen, keep every field reachable. */
dialog.ap-modal[data-ap-modal-cramped="true"]>.ap-modal-card{overflow-y:auto;overscroll-behavior:contain}
/* In keyboard-sized landscape space, a sticky header can cover the entire
   scroller. Let it scroll away so fields and confirmation remain reachable. */
dialog.ap-modal[data-ap-modal-cramped="true"] .ap-modal-card .ap-modal-header{position:static}
dialog.ap-modal[data-ap-modal-cramped="true"] .ap-modal-card .ap-modal-body{flex:none;overflow:visible}
/* Form wrappers must not shrink/clip the body when the card owns scrolling. */
dialog.ap-modal[data-ap-modal-cramped="true"]>.ap-modal-card>form{flex:none;overflow:visible}
dialog.ap-modal[data-ap-modal-cramped="true"] :is(.ap-food-picker__results,.nutrition-supplement-picker__results){min-height:100px;max-height:180px;flex-shrink:0}
@media(hover:hover) and (pointer:fine){dialog.ap-modal .ap-modal-close:hover{filter:brightness(1.08)}}
@media(max-width:760px),(orientation:landscape) and (max-height:600px) and (hover:none) and (pointer:coarse){
  dialog.ap-modal .ap-modal-header{padding:12px 14px}
  /* Safe-area clearance belongs to the dialog, not asymmetrical content padding. */
  dialog.ap-modal .ap-modal-body{padding:12px}
  dialog.ap-modal .ap-modal-footer{padding:10px 12px 12px;flex-wrap:wrap}
  dialog.ap-modal .ap-modal-footer button{min-width:0}
}
@media(prefers-reduced-motion:reduce){dialog.ap-modal::backdrop{backdrop-filter:none;-webkit-backdrop-filter:none}}
/* A compact, single touch scroller for library options above the keyboard. */
dialog.ap-modal.food-brand-dialog[data-ap-modal-cramped="true"]{width:calc(100vw - 16px)}
dialog.ap-modal.food-brand-dialog[data-ap-modal-cramped="true"]>.ap-modal-card{max-height:var(--ap-modal-available);touch-action:pan-y;-webkit-overflow-scrolling:touch}
dialog.ap-modal.food-brand-dialog[data-ap-modal-cramped="true"] .ap-modal-header{min-height:44px;padding:4px 10px;gap:8px}
dialog.ap-modal.food-brand-dialog[data-ap-modal-cramped="true"] .ap-modal-header :is(p,.ap-plan-icon){display:none}
dialog.ap-modal.food-brand-dialog[data-ap-modal-cramped="true"] .ap-modal-body{padding:6px 10px}
dialog.ap-modal.food-brand-dialog[data-ap-modal-cramped="true"] .ap-modal-footer{padding:6px 10px;display:flex;flex-wrap:nowrap}
dialog.ap-modal.food-brand-dialog[data-ap-modal-cramped="true"] .ap-modal-body input{font-size:16px;min-height:40px}
@media(min-width:600px){
  /* In landscape, show the one-field library form and its actions side by
     side. The title can scroll away without also hiding confirmation. */
  dialog.ap-modal.food-brand-dialog[data-ap-modal-cramped="true"]>.ap-modal-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end}
  dialog.ap-modal.food-brand-dialog[data-ap-modal-cramped="true"] .ap-modal-header{grid-column:1/-1}
}