/* The login glass is the common material for app windows; layout stays with each feature. */
:root {
  --window-surface: var(--paper);
  --window-border: var(--line);
  --window-shadow: 0 24px 80px rgba(0,0,0,.22);
  --window-backdrop: rgba(0,0,0,.3);
}
html[data-theme="dark"] {
  --window-surface: var(--paper);
  --window-border: var(--line);
  --window-shadow: 0 24px 80px rgba(0,0,0,.4);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  :root {
    --window-surface: rgba(249,250,247,.76);
    --window-border: rgba(255,255,255,.7);
  }
  html[data-theme="dark"] {
    --window-surface: rgba(23,27,25,.76);
    --window-border: rgba(221,230,222,.2);
  }
  html dialog.dialog:not(#scanDialog):not(.photo-viewer),
  html dialog.account-sheet,
  html :is(#mealTimeDialog,.meal-detail-popover),
  html dialog#coachHeaderMenu,
  html #accountDialog.account-management {
    background: var(--window-surface);
    border: 1px solid var(--window-border);
    box-shadow: var(--window-shadow);
    -webkit-backdrop-filter: blur(22px) saturate(1.15);
    backdrop-filter: blur(22px) saturate(1.15);
  }
  html #mealDetailDialog .detail-sheet {
    background: var(--window-surface);
    -webkit-backdrop-filter: blur(22px) saturate(1.15);
    backdrop-filter: blur(22px) saturate(1.15);
  }
  html #coachDialog { --messenger-background: transparent; }
  html #coachSettingsDialog .coach-settings-footer,
  html #planShoppingDialog > .dialog-handle {
    background: transparent;
  }
  html :is(.toast,#mealSwipeHint) {
    background: var(--window-surface);
    border: 1px solid var(--window-border);
    -webkit-backdrop-filter: blur(22px) saturate(1.15);
    backdrop-filter: blur(22px) saturate(1.15);
  }
  html :is(#mealTimeDialog,.meal-detail-popover)[data-arrow="visible"]::before {
    background: var(--window-surface);
    -webkit-backdrop-filter: blur(22px) saturate(1.15);
    backdrop-filter: blur(22px) saturate(1.15);
  }
}
html dialog.dialog:not(#scanDialog):not(#mealTimeDialog):not(.photo-viewer)::backdrop {
  background: var(--window-backdrop);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
html dialog.dialog.sheet:not(#scanDialog) { border-radius: 24px 24px 0 0; }
html :is(#mealTimeDialog,.meal-detail-popover),
html dialog#coachHeaderMenu { border-radius: 16px; }
html :is(dialog.dialog,dialog.account-sheet,.meal-detail-popover,#coachHeaderMenu)
  :is(button,input,textarea,select,summary):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}
html dialog.dialog .dialog-handle:focus-visible { outline: none; }
html dialog.dialog .dialog-handle:focus-visible > span {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}