/* Protect the existing website and PWA content on phones with a notch. */
:root {
  --mc-safe-left: env(safe-area-inset-left, 0px);
  --mc-safe-right: env(safe-area-inset-right, 0px);
  --mc-safe-top: env(safe-area-inset-top, 0px);
  --mc-safe-bottom: env(safe-area-inset-bottom, 0px);
}
.brand { min-width: 44px; min-height: 44px; }
body.is-marketing .marketing-page {
  padding: var(--mc-safe-top) var(--mc-safe-right) var(--mc-safe-bottom) var(--mc-safe-left);
}
body.is-public-document {
  padding: var(--mc-safe-top) var(--mc-safe-right) var(--mc-safe-bottom) var(--mc-safe-left);
}
.app-shell { padding-inline: var(--mc-safe-left) var(--mc-safe-right); }
.app-sidebar { padding-top: max(28px, var(--mc-safe-top)); padding-bottom: max(20px, var(--mc-safe-bottom)); }
@media (max-width: 640px) {
  .mc-sheet:not(#account-sheet) {
    width: calc(100% - var(--mc-safe-left) - var(--mc-safe-right));
    margin-inline: var(--mc-safe-left) var(--mc-safe-right);
  }
  .mc-nav--mobile { left: calc(50% + (var(--mc-safe-left) - var(--mc-safe-right)) / 2); }
}