/* The standalone view uses the same 75% scale, shrinking further on short screens. */
html:not([data-embedded='true']) .prototype-stage {
  padding: 16px;
  justify-content: center;
}

html:not([data-embedded='true']) .prototype-stage > * {
  zoom: var(--prototype-scale, 0.75);
}

/* Give the provider profile more breathing room inside the rounded panel. */
.pw-dashboard-profile {
  margin-top: 28px;
  flex-shrink: 0;
}

/* Split the dashboard's remaining space evenly above and below its grid. */
.pw-dashboard-grid {
  margin-block: auto;
  flex-shrink: 0;
}

/* Remove the standalone presentation stage when shown inside the portfolio phone. */
html[data-embedded='true'],
html[data-embedded='true'] body,
html[data-embedded='true'] #root {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

html[data-embedded='true'] .prototype-stage {
  display: block;
  min-height: 0;
  height: 100%;
  padding: 0;
  overflow: hidden;
}

html[data-embedded='true'] .prototype-stage > * {
  height: 100%;
  box-shadow: none;
}

html[data-embedded='true'] [data-testid='mobile-screen'] {
  width: 100%;
  height: 100%;
  /* Clip menus, dialogs, and their animated backdrops to the phone screen. */
  border-radius: 42px;
  clip-path: inset(0 round 42px);
}