/* iPhone (and edge-to-edge Android) safe areas, in one place and loaded last so it wins from the generic dialog rules.
   Full-screen dialogs handle their own insets (welcome, tour, intake, sport focus, guided workout, 3D, sheets); this
   file covers the sticky top bar and every centred dialog. Checked with scripts/theme/review-screens.cjs against a
   build in which env(safe-area-inset-*) is replaced by 59px/34px (see docs/theme.md). */
@supports (padding:env(safe-area-inset-top)){
 /* The top bar sticks below the status bar; the pseudo-element paints the status-bar strip so scrolled content never shows through it. */
 .topbar{top:env(safe-area-inset-top)}
 .topbar::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:env(safe-area-inset-top);background:var(--bg);pointer-events:none}
 /* Centred dialogs stay clear of the status bar and the home indicator on every phone. */
 dialog[open]:not(.coach-fullscreen):not(.sport-focus):not(#welcome-screen):not(#app-intro):not(#workout-exercise):not(.motion3d-dialog):not(#livu-picker):not(#food-scan-dialog):not(.attention-dialog):not(#diary-dialog:has(#diary-picker-results)):not(#coach-medical-advice):not(#cooking-mode):not(.cooking-mode){
  max-height:calc(100dvh - 2 * max(env(safe-area-inset-top),env(safe-area-inset-bottom)) - 24px)!important;
 }
 .coach-dialog #coach-medical-advice{max-height:calc(100dvh - 2 * max(env(safe-area-inset-top),env(safe-area-inset-bottom)) - 24px)!important}
 /* Bottom-anchored dialogs keep their distance from the home indicator. */
 .diary-dialog{margin-bottom:max(10px,env(safe-area-inset-bottom))!important}
 .attention-inner{max-height:calc(100dvh - 110px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
}
/* Programmatic focus on a heading (dialogs move focus to their title for screen readers) must not draw WebKit's focus ring. */
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none}
@supports (padding:env(safe-area-inset-top)){
 /* Full-screen product picker in the diary: header below the status bar and it stays reachable while scrolling. */
 dialog#diary-dialog[open]:has(#diary-picker-results){padding-top:max(20px,calc(env(safe-area-inset-top) + 12px))!important}
 dialog#diary-dialog[open]:has(#diary-picker-results) .diary-dialog-top{position:sticky;top:0;z-index:3;padding-bottom:8px;background:var(--surface)}
 dialog#diary-dialog[open]:has(#diary-picker-results) .diary-dialog-top::before{content:"";position:absolute;left:-20px;right:-20px;bottom:100%;height:max(20px,calc(env(safe-area-inset-top) + 12px));background:var(--surface)}
 /* Bottom sheets stop below the status bar instead of touching it. */
 dialog#livu-picker{max-height:calc(100dvh - env(safe-area-inset-top) - 24px)!important}
 dialog#food-scan-dialog[open]{max-height:calc(100dvh - env(safe-area-inset-top) - 24px)!important}
 dialog#food-scan-dialog[open] .scan-header{top:0}
}
/* The toast sits above the phone tab bar (tab bar: bottom 10px + 6px + 57px + 6px + inset ≈ 80px + inset) and paints over it;
   mobile.css set bottom:95px without the inset and z-index 5 (the tab bar has 30), so it slid behind the bar on iPhone. */
@media(max-width:720px){#toast{bottom:calc(100px + env(safe-area-inset-bottom))!important;z-index:40!important}}